我正在尝试使用 styled-system 和 styled-components 创建一个按钮组件。
styled-system 的变体效果很好,但我想知道如何添加条件 css。例如,我正在尝试呈现主 block 按钮。
const StyledButton = styled(Button)`
${props => props.block && css`width: 100%;`
`;
// primary
<StyledButton block variant="primary" />
这按预期工作,但我想知道是否有更好的方法使用纯 javascript 以漂亮的方式应用 block
。
最佳答案
我认为你可以缩短你的具体例子如下(你不需要在那里使用 css
方法):
const StyledButton = styled(Button)`
${({block}) => block && 'width: 100%;'}
`;
但总的来说,我认为这是唯一的方法。在我看来并不难看,但如果您有一些复杂的条件,您可以将一些代码移动到具有描述性名称的单独变量或函数中。
关于javascript - 使用样式组件和样式系统添加条件样式的最佳方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55464164/