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

【问题标题】：How to use const before declaration in styled-components如何在样式组件中声明之前使用 const
【发布时间】：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}
`;

我们将不胜感激。

【问题讨论】：

标签： html css reactjs flexbox styled-components

【解决方案1】：

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

【讨论】：