用样式组件和样式系统添加条件样式的最好方法是什么？

Question

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

styled-system的变体工作得很好，但我想知道如何添加条件css。例如，我正在尝试渲染主块按钮。

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

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

这和预期的一样，但我想知道有没有更好的方法来用纯javascript漂亮地应用block。

Answer 1

我认为你可以将你的具体例子缩短如下(你不需要在那里使用css方法)：

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

但总的来说，我相信这是唯一的方法。在我看来并不难看，但是如果你有一些复杂的条件，你可以将一些代码移到单独的变量或具有描述性名称的函数中。

Answer 2

您可以创建一个混入并有条件地添加它。你只需要从Styled-components.导入css例如：

const buttonWidthMixin = css`
   width: 100%
`

然后您可以将其添加到按钮，如下所示：

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

现在，如果您添加块属性到按钮，它将添加我们的新混入到css。

Answer 3

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

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