如何在样式组件中声明之前使用 const

Posted 2023-03-05

【中文标题】如何在样式组件中声明之前使用 const

【英文标题】：How to use const before declaration in styled-components

【发布时间】：2021-11-06 04:09:37

【问题描述】：

让我澄清一下这个问题。我有一个样式组件const PlanBody，只要他的父母之一const PlanContainer 悬停，它就需要接收样式。问题是我在声明const PlanContainer 时不能调用$PlanBody，因为它还不存在（稍后在同一个文件中声明，下面几百行）。

这是我的代码：

const PlanContainer = styled.div<Props>`
/* Property that will change onHover */
  flex: 1 1 0px;

    &:hover 
      $PlanBody 
        /* Property being overridden */
        flex: 1 1 100%;
      
    
`;

然后，下面几百行：

const PlanBody = styled.div`
/* Default value when container not hovered */
  flex: 1 1 0px;
`;

顺便说一句，我不能在PlanContainer 之前声明PlanBody。我可以，但在这种情况下不行。我正在寻找另一种解决方案。

我尝试使用 css styled-components 这样的关键字，但无济于事：

const PlanBodyStyles = css``;


const PlanContainer = styled.div<Props>`
  flex: 1 1 0px;

    &:hover 
      $PlanBodyStyles 
        flex: 1 1 100%;
      
    

`;

然后又是下面几百行：

const PlanBody = styled.div`
/* Default value when container not hovered */
  flex: 1 1 0px;


  /* Override flex property */
  $PlanBodyStyles
`;

我们将不胜感激。

【参考方案1】：

这不是我希望在 2021 年给出的答案……但您可以使用 var 而不是 const，以采取不同的 hoisting 行为