样式组件和自定义样式？

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元素，如button，table td等，但显式设置）。
3. 同一HTML元素（或）React Component的不同样式被明确声明为不同的样式。 （如果您参考样式组件文档的常见问题解答部分，您可能会注意到这些 - https://github.com/styled-components/styled-components/blob/master/docs/faq.md）

总的来说，回答你的问题，我们已经摆脱了古典样式表，并考虑了多种风格的组合。它运行良好，除了查看单元测试有点痛苦。

由于