我正在研究在React应用程序中设置页面样式的最佳方法。我看到了很多样式库，例如样式组件，Glamour，CSS模块。
在我当前的项目中，我正在使用CSS模块（主要是为了摆脱CSS冲突和特定于页面的CSS）。我在Google上搜索了很多内容，为什么我应该使用样式化的组件和CSS-in-JS，但我没有得到任何具体的答案。所以我的问题是，使用CSS-in-JS或样式化的组件是否具有实际的性能优势，或者仅仅是语法糖。
答案 0 :(得分：7)
我对这两种技术都有经验，使用过Radium（JS库中的另一个CSS），并且目前在我的项目中使用CSS模块。样式化的组件绝对比Radium好得多，因为它们使您可以样式化：hover状态等。但是在我看来，CSS模块仍然是最好的选择，尤其是当您看到您的项目将增长到超过10-50个组件时。 JS库中跨CSS的代码共享是一场噩梦。另一方面，CSS模块可让您组成其他类，从其他CSS文件导入变量，甚至JS也可以从CSS导入变量。
答案 1 :(得分：3)
与基于React的生态系统中编写CSS的任何其他方式相比，我更喜欢使用样式化组件的原因之一是，它强制执行最佳实践。正如某人在那写的那样，使用样式化组件时的代码共享是一场噩梦，我不能完全同意，这就是执行部分的所在。如果您不是真正编写模块化组件，那应该设计React组件层次结构（组成用于构建功能丰富的模块的原子组件），您肯定会多次重写相似的样式。但是，如果您可以使用样式化的组件（甚至可能更喜欢内联样式）以一种真正的自下而上的方式破坏和组合组件，那么代码共享就不再是问题。进一步的代码共享不应该在样式级别上讨论，在大多数情况下，共享封装应该是组件级别的东西。在我看来，CSS模块仅仅是className范围限制工具，而样式化的组件为基于React的项目中的样式提供了更具声明性的方法。
解决我无法缠住脑袋的一个缺点是样式化组件导致的嵌套组件结构。在命名样式组件时，我尝试保持更多的语义意识，但是我确信可能还有其他技术可以对此做些事情。我本人并没有发现很多问题，因此也没有为此付出很多努力。
样式化的组件的性能可能会比css模块要差一些，因为在创建样式和渲染组件时肯定会涉及一些开销，但这只是微小的差别。
答案 2 :(得分：0)
可以使用普通的HTML属性，如果需要，可以在JS中混合使用，它支持状态，嵌套和媒体查询。不，它不会全部以style =“”结尾，而是创建一个“ real” class =属性并像CSS模块一样将CSS拉入头部。
它甚至允许您设置自定义组件（不仅是HTML组件）的样式，如果它们仅接受className作为prop，那么：
const Button = (props) => <button className={props.className}>{props.children}</button>
const CustomButton = styled（Button）
display: inline-block;
padding: 5px;
const Item =（）=>单击我！
即使它像其他技术一样也有缺点。主要的事情是在多个项目之间共享代码可能会变得更加困难
如果您优先考虑速度，那么魅力四射或样式丰富的组件正是您可以在Web应用程序中使用的组件。用字符串为样式化组件编写样式可能是不寻常的，但是访问者会喜欢快速加载的网页。如果您决定使用样式化组件，请不要忘记install plugin to support syntax highlighting in strings或帮助创建一个新组件。
Sass / css和内联样式也非常快，但是如果您决定将代码用于React Native应用，请准备重写样式表。但是另一方面，css和其他样式的预处理器是Web应用程序的不错选择。