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

Question

我一直很喜欢签出样式化的组件，但是有点坚持将所有东西提取到组件中的概念，以及如何为特定的用例调整样式。例如：

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

假设我想为这个用例定制以下内容：

1. 灰色标题(柔和的文字颜色)，
2. 正文文本的右页边距为100‘t(不要问原因)。

采用样式-组件的方式，第一部分可以这样做：

<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)

总的来说，为了回答您的问题，我们已经脱离了经典的样式表，并且考虑了合并多种样式。它运行得很好，只是在单元测试上查找有点痛苦。

谢谢