Styled-Components 根据 ID 应用样式

Question

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

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

StyledButton 在哪里

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

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

Answer 1

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

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

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

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