样式化组件和自定义样式？

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）

总体回答你的问题，我们已经从古典样式搬走了，以及考虑组合多个样式。它运行良好，除了在单元测试中查找有点痛苦。

谢谢