如何使用 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``

您應該從此鏈接了解樣式化組件