使用样式化的组件和样式化的系统添加条件样式的最佳方法是什么?

时间:2019-04-01 21:57:40

标签: javascript css reactjs styled-components

我正在尝试创建具有样式系统和样式组件的按钮组件。

样式化系统的变体效果很好,但是我想知道如何添加条件CSS。例如,我正在尝试渲染主块按钮。

const StyledButton = styled(Button)`
  ${props => props.block && css`width: 100%;`
`;

// primary
<StyledButton block variant="primary" />

这可以按预期工作,但是我想知道是否有更好的方法可以通过纯JavaScript以美丽的方式应用block

3 个答案:

答案 0 :(得分:0)

我认为您可以按照以下方式简化具体示例(您无需在其中使用css方法):

const StyledButton = styled(Button)`
  ${({block}) => block && 'width: 100%;'}
`;

但是总的来说,我相信这是唯一的方法。对我来说,看起来并不难看,但是如果您遇到一些复杂的情况,则可以将一些代码移到具有描述性名称的单独变量或函数中。

答案 1 :(得分:0)

可以通过以下方式将样式作为json对象返回:

const StyledButton = styled(Button)`
  ${({block}) => block && {width: '100%'}}
`;

答案 2 :(得分:0)

您可以创建一个mixin并有条件地添加它。您只需要从样式化组件导入css。例如:

const buttonWidthMixin = css`
   width: 100%
`

然后您可以将其添加到按钮中,如下所示:

const StyledButton = styled(Button)`
   ${props => props.block && buttonWidthMixin;
`

现在,如果在按钮上添加块道具,它将在CSS中添加新的mixin。