javascript - 样式化 react 组件

Question

我是 React 的忠实粉丝。这是一个非常棒的构建 UI 的工具，但有一些问题很难顺利解决。

其中一个是样式组件，最初的“ react 方式”是使用内联样式，但这个解决方案有一些负面的品质，例如:

• 从设计者的 Angular 来看，这似乎不是一个好的解决方案
• 是否足够可定制？
• 我无法使用一些很棒的工具，例如 autoprefixer 或 sass/less，这些工具使我的样式更易于维护

但也有一些积极的:

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

其他“WriteYourStylesInJS”做法也有同样的弱点，最大的就是减少了样式工具集(是的，我懒得写前缀了)。

至于我的实际问题，您如何使您的 react 组件和 css(或 scss/sass 或更少或任何其他语言)样式具有凝聚力？

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

我对内联样式的偏见是否合理？

Answer 1

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

• 我没有风格冲突。在我之前所有的非 react 元素中，我都有它们……很容易修复，但我现在不需要担心了
• 如果我需要编辑组件的样式。我只是转到组件并对其进行编辑。之前......我必须检查元素的类，然后转到 css 文件进行编辑......也许我破坏了具有相同类的另一个元素的样式!
• 我喜欢 js 对象的风格。无处不在!多亏了我们不需要使用预处理器作为 SCSS 来拥有变量(只是一个例子)

但你是对的，你可能会对伪选择器(如 :hover... 或 vendor 前缀，甚至是媒体查询)感到头疼。

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

保持愚蠢!