样式反应组件

Question

我是一个反应灵敏的大粉丝。它是构建UI的一个非常棒的工具，但是有些问题很难摆脱困境。

其中一个是造型组件，原始＆＃39;反应方式＆＃39;使用内联样式，但这个解决方案有一些负面的品质，例如：

• 从设计师的角度来看似乎不是一个好的解决方案
• 可以自定义吗？
• 我不能使用autoprefixer或sass / less等一些很棒的工具，这样可以让我的风格更易于维护

但有一些积极的因素：

• 组件变得非常有凝聚力和可重复使用，样式随之一起发货。
• 在某些库中使用内联样式时，我不需要任何样式表，样式都在我的代码中

其他＆＃34; WriteYourStylesInJS＆＃34;实践具有相同的弱点，最大的是减少的样式工具集（是的，我懒得写前缀）。

至于我的实际问题，你如何使你的反应组件和css（或scss / sass或更少或任何其他语言）风格具有凝聚力？

如何使样式可定制和可维护？

我对内联样式的介词是否合理？

Answer 1

我正在使用内联样式，一开始我遇到了一些问题，但你知道吗？我喜欢它... ...

• 我没有风格冲突。在我之前的所有非反应项目中，我都有它们......很容易修复但我现在不需要担心
• 如果我需要编辑组件的样式。我只是去组件并编辑它。之前......我必须检查元素的类，然后转到css文件进行编辑..也许我打破了同一个类的另一个元素的风格！
• 我喜欢js对象的风格。到处都是Js！多亏了我们不需要使用预处理器作为SCSS来获取变量（只是一个例子）

但是你是对的，你可能会对伪选择器感到头疼，例如：悬停......或供应商预制，甚至是媒体查询。

所以..如果你需要所有这些，也许你应该检查Radium

保持愚蠢！

Answer 2

在我的项目中，我使用了单独的css文件进行样式设置，其名称与我的组件相同。在生产中，它无论如何都会在一个js / css文件中缩小和分割，但是您可以轻松地将组件从一个项目复制/粘贴到项目中。