Styled-Components 根据 ID 应用样式

【问题标题】：Styled-Components apply style based on IDStyled-Components 根据 ID 应用样式
【发布时间】：2021-11-01 16:15:20
【问题描述】：

假设我有一个具有以下结构的 StyledButton；

<StyledButton className={`button-${id}`}>{content}</StyledButton>

StyledButton 在哪里

const StyledButton = styled.button`
  ...
`;

如果 Button className 等于一个值，我想指定要应用的其他样式。如果 StyledButton 具有指定的类，我可以在 StyledButton 中使用哪个选择器来应用样式？

【问题讨论】：

【解决方案1】：

您始终可以在样式化组件的模板文字中添加内联函数。您收到props 作为第一个参数。

const StyledButton = styled.button`
    ${props => props.className === 'foo-bar' && css`
        color: red;
    `};
`;

如果您不确定您收到的是哪个props，您可以通过以下方式轻松检查：

const StyledButton = styled.button`
    ${console.log};
`;

【讨论】：