我一直喜欢检查样式化的组件，但是对将所有内容提取到组件中以及如何针对特定用例调整样式的概念有些困惑。例如：
<Flex>
<MyStyledTitle>Hello I am a Title</MyStyledTitle>
<MyStyledBodyText>blah</MyStyledBodyText>
</Flex>
假设我要针对此用例进行以下定制：
标题灰色（柔和的文字颜色），
正文文本的右边距为100px（不要问为什么）。
在样式化组件的方式中，第一部分可以这样完成：
<MyStyledTitle colorTint='subdued' />
甚至
<MyStyledTitle>
<SubduedText>MyTitle</SubduedText>
</MyStyledTitle>
也许使用标题的道具，使您可以配置它以使用柔和的文本或定义灰色文本的另一个hild组件。
但是第二种选择呢？
<MyStyledBodyText style={{paddingRight: 100}} />
内联样式？在其周围使用网格或布局组件？
在什么时候某物成为特定的样式组成部分，如果没有，那么如何定制较小的样式变化？
虽然我真的很喜欢删除组件+类名之间的映射的想法，但是我想我对拥有一个可以包含所有类和修饰符css的“样式表”文件的经典想法感到有些困惑，然后使用演示者可以在CSS类的组合之间进行选择。
我在这里可能会遗漏一些东西，但只是渴望在实践中看到一些更大的样式化组件示例。任何链接/提示将不胜感激！
最佳答案
我们已经在项目中广泛使用样式化组件。我们使用的几种基本模式/惯例是
使用StyledComponents创建的组件不会在React组件中使用。在极端情况下，我们将它们拉入外部文件并导出。
DIV是使用最广泛的样式化组件（styled.div）。 （当然，我们确实使用其他html元素，例如button，table td等，但样式明确）。
同一HTML元素（或React组件）的不同样式被明确声明为不同样式。 （如果您参考样式化组件文档的FAQ部分，您可能会注意到这些-https://github.com/styled-components/styled-components/blob/master/docs/faq.md）
总体而言，为回答您的问题，我们已经脱离了经典样式表，并开始考虑组合多种样式。它运行良好，除了查找单元测试有点痛苦。
谢谢
关于javascript - 样式组件和自定义样式？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46683329/