如何使用 React.js 为 React if 语句设置适当的样式组件

Question

我正在按照“从零到英雄”的计划进行自己的项目，我的朋友告诉我有关样式化组件的信息，我决定替换我清晰的.css并转向样式化组件。

我知道它在基本情况下是如何工作的。 <MyComponent>和const MyComponent = styled.div css, css, css

我正在为这两种情况而苦苦挣扎

1. <div className={color ? 'header header-bg' : 'header'}> <div className={color ? 'header header-bg' : 'header'}>如何为样式化组件编写代码？ 像<MyComponent={color ? 'header header-bg' : 'header'}> <MyComponent={color ? 'header header-bg' : 'header'}>但我不知道还有什么......

2. 在清晰的风格中，我有很多情况，比如

   .class1, .class2, .class3 { 样式 }

请问如何用样式化的组件编写它？ 现在，对于每个 class1-3，我有 3 倍相同的代码，这并不好。 我也尝试了类似const Class1, Class2 = styled.div但它不起作用

Answer 1

您可以在样式组件中传递道具而不是三元运算符，在这里您可以看到示例在样式组件中有条件地添加背景颜色和const Class1, Class2 = styled.div这将不起作用，您应该这样做

const Class1 = styled.div``
const Class2 = styled.div``
const Class3 = styled.div``

您应该从此链接了解样式化组件