样式化反应组件
Styling react components
我是 React 的忠实粉丝。这是一个非常棒的构建工具UI，但也有一些问题很难顺利解决。
其中一个是样式组件，原来 'react-way' 使用内联样式，但这个解决方案有一些负面的品质，例如：
- 从设计者的角度来看，这似乎不是一个好的解决方案
- 是否足够可定制？
- 我无法使用一些很棒的工具，例如 autoprefixer 或 sass/less，它们使我的样式更易于维护
但也有一些积极的：
- 组件变得非常有凝聚力和可重用性，样式与它一起交付。
- 在某些库中使用内联样式时，我不需要任何样式表，样式都在我的代码中
其他"WriteYourStylesInJS"做法也有同样的弱点，最大的就是减少了样式工具集（是的，我懒得写前缀了）。
至于我的实际问题，您如何使您的 React 组件和 css（或 scss/sass 或更少或任何其他语言）样式具有凝聚力？
如何使样式可定制和可维护？
我对内联样式的偏见是否合理？
在我的项目中，我使用单独的 css 文件进行样式设置，名称与我的组件相同。在生产中，它无论如何都会被缩小并拆分成一个 js/css 文件，但您可以轻松地 copy/paste 从一个项目到另一个项目的组件。
我正在使用内联样式，一开始我遇到了一些问题，但你知道吗？我喜欢它知道...
- 我没有风格冲突。在我以前的所有非反应项目中，我都有它们......很容易修复，但我现在不需要担心它
- 如果我需要编辑组件的样式。我只是转到组件并对其进行编辑。之前...我必须检查元素的 classes 然后转到 css 文件进行编辑..也许我正在用相同的 [= 破坏另一个元素的样式28=]!
- 我喜欢 js 对象的风格。无处不在！多亏了我们不需要使用预处理器作为 SCSS 来拥有变量（只是一个例子）
但你是对的，你可能会对伪选择器如 :hover... 或供应商前缀，甚至是媒体查询感到头疼。
所以..如果你需要所有这些，也许你应该检查Radium
保持愚蠢！
我是 React 的忠实粉丝。这是一个非常棒的构建工具UI，但也有一些问题很难顺利解决。
其中一个是样式组件，原来 'react-way' 使用内联样式，但这个解决方案有一些负面的品质，例如：
- 从设计者的角度来看，这似乎不是一个好的解决方案
- 是否足够可定制？
- 我无法使用一些很棒的工具，例如 autoprefixer 或 sass/less，它们使我的样式更易于维护
但也有一些积极的：
- 组件变得非常有凝聚力和可重用性，样式与它一起交付。
- 在某些库中使用内联样式时，我不需要任何样式表，样式都在我的代码中
其他"WriteYourStylesInJS"做法也有同样的弱点，最大的就是减少了样式工具集（是的，我懒得写前缀了）。
至于我的实际问题，您如何使您的 React 组件和 css（或 scss/sass 或更少或任何其他语言）样式具有凝聚力？
如何使样式可定制和可维护？
我对内联样式的偏见是否合理？
在我的项目中，我使用单独的 css 文件进行样式设置，名称与我的组件相同。在生产中，它无论如何都会被缩小并拆分成一个 js/css 文件，但您可以轻松地 copy/paste 从一个项目到另一个项目的组件。
我正在使用内联样式，一开始我遇到了一些问题，但你知道吗？我喜欢它知道...
- 我没有风格冲突。在我以前的所有非反应项目中，我都有它们......很容易修复，但我现在不需要担心它
- 如果我需要编辑组件的样式。我只是转到组件并对其进行编辑。之前...我必须检查元素的 classes 然后转到 css 文件进行编辑..也许我正在用相同的 [= 破坏另一个元素的样式28=]!
- 我喜欢 js 对象的风格。无处不在！多亏了我们不需要使用预处理器作为 SCSS 来拥有变量（只是一个例子）
但你是对的，你可能会对伪选择器如 :hover... 或供应商前缀，甚至是媒体查询感到头疼。
所以..如果你需要所有这些，也许你应该检查Radium
保持愚蠢！