样式组件和自定义样式？

Question

我一直喜欢检查样式化组件，但对将所有内容提取到组件中的概念以及如何为特定用例调整样式的概念有点卡住了。 例如：

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

假设我想为此用例进行以下自定义：

1. 样式标题灰色（柔和的文本颜色），
2. 正文的右边距为 100 像素（不要问为什么）。

样式组件方式，第一部分可以这样完成：

<MyStyledTitle colorTint='subdued' /> 

甚至

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

也许使用标题的道具，让您将其配置为使用柔和的文本或定义灰色文本的另一个 hild 组件。

但是第二个选项呢...

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

内联风格？ 在它周围使用 Grid 或布局组件？

什么时候某些东西会变成一个特定的样式组件，如果不是，那么如何自定义较小的样式更改？

---

虽然我真的很喜欢这种删除组件 + 类名之间映射的想法，但我想我在拥有一个可以包含所有类和修饰符 css 的“样式表”文件的经典想法之间感到有些纠结，然后使用演示者在 css 类的组合之间进行选择。

我可能在这里遗漏了一些东西，但只是渴望在实践中看到一些更大的样式组件示例。 任何链接/提示将不胜感激！

Answer 1

我们一直在我们的项目中广泛使用样式组件。 我们使用的几个基本模式/约定是

1. 使用 StyledComponents 创建的组件不能跨 React 组件使用。 在极端情况下，我们将它们拉入外部文件并导出。
2. DIV 是使用最广泛的样式组件（ styled.div ）。 （当然，我们确实使用了其他 html 元素，如按钮、表格 td 等，但样式明确）。
3. 同一个 HTML 元素（或）React 组件的不同样式被显式声明为不同的样式。 （如果您参考 styled-components 文档的常见问题部分，您可能会注意到这些 - https://github.com/styled-components/styled-components/blob/master/docs/faq.md ）

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

谢谢