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

Question

我一直很喜欢检查样式化组件，但对将所有内容提取到组件中以及如何针对特定用例调整样式的概念有点困惑。例如:

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

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

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

styled-components 方式，第一部分可以这样完成:

<MyStyledTitle colorTint='subdued' /> 

甚至

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

也许为标题使用一个 Prop ，让您可以将其配置为使用柔和的文本或定义灰色文本的另一个 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)

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

谢谢