在Reactjs中使用样式化组件而不是css模块有什么好处

Question

我正在研究在React应用程序中设置页面样式的最佳方法.我看到很多样式的样式,如Styled Components,Glamour,CSS Modules.

在我目前的项目中,我正在使用CSS模块(主要是为了摆脱CSS冲突和页面特定的CSS).我搜索了很多关于为什么我应该使用样式组件和CSS-in-JS但我无法得到任何具体答案.所以我的问题是,如果使用CSS-in-JS或样式组件有实际的性能优势,或者它只是语法糖.

Answer 1

我对这两种技术都有经验，使用过Radium（JS库中的另一个CSS），并且目前在我的项目中使用CSS模块。样式化的组件绝对比Radium好得多，因为它们使您可以样式化：hover状态等。但是在我看来，CSS模块仍然是最好的选择，尤其是当您看到您的项目将增长到超过10-50个组件时。JS库中跨CSS的代码共享是一场噩梦。另一方面，CSS模块使您可以组成其他类，从其他CSS文件导入变量，甚至JS也可以从CSS导入变量。

Answer 2

在基于 React 的生态系统中，我比任何其他编写 css 的方式更喜欢样式化组件的原因之一是它强制执行最佳实践。正如有人在那里写的那样，在使用样式化组件时共享代码是一场噩梦，我不能同意更多，这就是执行部分的用武之地。如果您没有编写真正的模块化组件，那么应该如何设计 React 组件层次结构（用于构建功能丰富的模块的原子组件），您肯定会多次重写类似的样式。但是，如果您可以使用样式化组件（或者甚至是内联样式，如果您愿意的话）以真正自下而上的方式分解和组合您的组件，代码共享就不再是问题了。进一步的代码共享不应成为样式级别讨论的问题，在大多数情况下，共享封装应该是组件级的东西。在我看来，CSS 模块只是一个 className 范围限制工具，而样式化组件为基于 React 的项目中的样式提供了一种更具声明性的方法。

我一直无法理解的缺点之一是样式化组件导致的嵌套组件结构。在命名我的样式组件时，我试图保持更多的语义意识，但我确信可能有其他技术可以对此做些什么。我自己并不觉得这有什么大问题，因此并没有为此付出太多努力。

样式化组件的性能可能不如 css 模块，因为创建用于样式化和渲染它们的组件肯定会产生开销，但这只是一个微小的差异。

Answer 3

可以使用普通的 HTML 属性，如果需要，可以混合使用 JS，它支持状态、嵌套和媒体查询。不，它不会全部以 style="" 结束，而是创建一个 \xe2\x80\x9creal\xe2\x80\x9d class= 属性并将 CSS 拉出到 head 中，就像 css-modules 一样。

\n\n

如果自定义组件仅接受 className 作为 prop，它甚至允许您设置自定义组件的样式（不仅是 HTML 组件），因此：

\n\n

const Button = (props) => <button className={props.className}>{props.children}</button>\n

\n\n

const CustomButton = styled(Button) \n display: inline-block;\n padding: 5px;\n\nconst Item = () => 点击我！

\n\n

尽管它也像其他技术一样有缺点。最主要的是在多个项目之间共享代码可能会变得非常困难

\n\n

如果您优先考虑的是速度，那么迷人或风格化的组件正是您可以在网络应用程序中使用的组件。在样式组件的字符串中编写样式可能不寻常，但访问者会欣赏快速加载的网页。如果您决定使用样式组件，请不要忘记安装插件来支持字符串中的语法突出显示，或者可能有助于创建一个新的插件。

\n\n

Sass/css 和内联样式也非常快，但如果您决定为 React Native 应用程序重用代码，请准备好重写样式表。但另一方面，CSS 和其他样式预处理器是 Web 应用程序的不错选择。

\n