css - React 组件的样式困境

Question

我开始使用 React 和 Redux 制作新项目。我是 React 新手，不确定应该使用哪种样式方法。显然，我想使用不会降低性能、提供 CSS3 的所有功能并且可维护的那个。所以选择是：

1. 使用Radium的内联样式
2. SASS
3. CSS 模块

我有长期使用 SASS 和 CSS3 的经验。尽管如此，内联样式确实给我留下了深刻的印象，但它不提供自动前缀和其他一些不错的自动化功能。显然没有终极选择，但最有效的选择是什么？

Answer 1

我个人会推荐魅力和迷人的组合。魅力四射是建立在魅力之上的，因此您可以将两者用于不同的目的。

使用glamor，您可以将全局样式注入页面，例如：

css.global('h1', { fontSize: '3rem' })

使用glamorous，您可以创建使样式更直观的React 组件，例如：

glamorous.Div({ padding: '2rem', background: 'red' })

return <Div>Some text</Div>

就个人而言，我更喜欢使用 CSS-in-JS，而不是像 Sass/LESS 这样的预处理器或使用某种类似 CSS 的工具。我发现尝试在模板标签或另一个文件中编写 CSS 既麻烦又烦人。一旦习惯了，直接利用 JavaScript 进行样式设置实际上是非常有趣的。

无耻插件：我为 CSS-in-JS 项目创建了一个帮助库，它可以自动生成有用的样式类，就像你在 Bootstrap 中找到的一样（例如.text-center，.ml-auto等.display-block）。它叫Euphoria，看看吧！