反应组件造型困境

Question

我开始使用React和Redux创建新项目。我是React的新手，不知道我应该使用什么样的造型。显然我想使用不会降低性能，提供CSS3的所有功能，并且可维护的那个。所以选择是：

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

我很长时间使用SASS和CSS3。然而内联样式给我留下了深刻的印象，但它并没有提供autoprefixer和其他一些不错的自动化功能。 显然没有最终选择，但最有效的选择是什么？

Answer 1

我个人推荐glamor和glamorous的组合。迷人的魅力建立在魅力之上，因此您可以将它们用于不同目的。

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

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

通过魅力四射，您可以创建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，{ {1}}，.ml-auto等）。它被称为Euphoria，请查看它！