时间戳

首页 > 解决方案 > 使用样式组件和样式系统添加条件样式的最佳方法是什么？

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

问题描述

我正在尝试使用样式系统和样式组件创建一个按钮组件。

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

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

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

这可以按预期工作，但我想知道是否有更好的方法可以block用纯 JavaScript 以漂亮的方式应用。

标签： javascriptcssreactjsstyled-components

解决方案

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

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

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

推荐阅读