css - 使用样式化组件比对组件使用 css 类有什么好处

Question

我们在使用样式化组件时编写 css，我不明白使用它的好处为什么我们不使用我们编写的 css 作为组件的类名。在有样式的组件中，我们有组件的包装器，当我们使用纯 css 时，我们有类名。用带样式的组件包装组件有什么好处

Answer 1

在 React web 开发中推送样式组件的原因是将样式仅封装到那些组件。没有将 css 渗入其他组件的风险。新开发人员可以更快地入职，而不是学习新的 css 组织结构。

也就是说，它具有限制性，开发速度较慢，并且通过应用您可以共享的相同样式来增加一些页面重量。

我发现最快的工作方式是使用纯 css 创建静态 html 网页，并以您要将其导入框架的方式组织它。然后，您可以拥有可独立于编译器进行测试的样板 html 设计，这在 Internet Explorer、Firefox、chrome、移动设备和所有不同的屏幕尺寸中进行测试要快得多。

如果你想使用样式组件，你可以使用这个 npm 插件将你的静态 css 转换成变量以用于样式组件 - https://www.npmjs.com/package/@inspiraller/create-css-vars

或者干脆不要。 Nextjs 不支持 css 导入，除非它是全局的，所以 webpack 编译选项是一个更通用的解决方案。