如果为真，则将变量传递给样式化组件以添加其他样式答案

【问题标题】：Passing variable to Styled Component to add additional styles if true如果为真，则将变量传递给样式化组件以添加其他样式
【发布时间】：2021-11-25 01:55:02
【问题描述】：

我有一个布尔属性，当前解析为true - 但是，当我将以下内容添加到我的样式化组件时，永远不会添加所需的样式。我很确定这是一个语法问题，即使我在这个组件中设置了shouldIndentLabel，样式也永远不会呈现？

const StyledText = styled.p`
  font-weight: 300px;
  display: inline-block;

  ${({ shouldIndentLabel }) =>
    shouldIndentLabel &&
    css`
      margin-left: 30px;
    `}
`;

【问题讨论】：

你能分享一下你的 JSX 中 StyledText 组件的使用吗？

标签： css reactjs styled-components

【解决方案1】：

这对我来说是一个愚蠢的错误 - 我完全忘记了通过 StyledText shouldIndentLabel 道具！我在原始问题中不包括 JSX 不好！

<StyledContainer>
   <StyledText shouldIndentLabel={shouldIndentLabel}
</StyledContainer>

【讨论】：