樣式化組件和自定義樣式？

Question

我一直喜歡檢查樣式化組件，但是將抽取所有內容抽取到組件中的概念有點卡住，以及如何針對特定用例調整樣式。例如：

<Flex> 
    <MyStyledTitle>Hello I am a Title</MyStyledTitle> 
    <MyStyledBodyText>blah</MyStyledBodyText> 
</Flex> 

比方說，我想爲這個用例以下的定製：

1. 風格的標題灰色（偏淡文本顏色），
2. 正文有一個正確的100px的邊距（不要問爲什麼）。

   <MyStyledTitle colorTint='subdued' /> 
   

   甚至

   <MyStyledTitle> 
       <SubduedText>MyTitle</SubduedText> 
   </MyStyledTitle> 
   

   也許使用稱號道具，讓你將其配置爲使用柔和：

的風格組件的方式，第一部分可以像做文本或另一個hild組件，它定義了灰色文本。

但是對於第二個選項...

<MyStyledBodyText style={{paddingRight: 100}} /> 

內聯風格？在它周圍使用網格或佈局組件？

什麼時候某件東西變成了特定的樣式組件，如果沒有，那麼如何定製更小的樣式變化？

---

雖然我很喜歡這個主意組件+類名之間取出的映射，我想我感覺有點有「樣式表」文件，該文件可以包含所有的類的古典思想之間徘徊和修飾符css，然後使用演示者在css類的組合之間進行選擇。

我可能在這裏錯過了一些東西，但只是想在實踐中看到樣式化組件的更大範例。任何鏈接/提示將不勝感激！

Answer 1

我們已經在我們的項目中廣泛使用了樣式化組件。我們使用的幾個基本模式/約定是

1. 使用StyledComponents創建的組件不在所有React組件中使用。在極端情況下，我們將它們拉入外部文件並導出。
2. DIV是最廣泛使用的樣式組件（styled.div）。 （當然，我們使用其他html元素，如按鈕，表td等，但明確的樣式）。
3. 相同HTML元素（或）React組件的不同樣式被明確聲明爲不同樣式。 （如果你指的是風格的組件文檔的FAQ部分，您可能會注意到這些 - https://github.com/styled-components/styled-components/blob/master/docs/faq.md）

總體回答你的問題，我們已經從古典樣式搬走了，以及考慮組合多個樣式。它運行良好，除了在單元測試中查找有點痛苦。

謝謝