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

Question

当我们使用样式化的组件时，我们会编写css，而我不明白使用它的好处，为什么我们不使用我们编写的css作为组件的类名。在样式化的组件中，我们有组件的包装器，当我们使用普通的css时，我们有类名。用样式组件包装组件的优点是什么？

Answer 1

将样式化的组件推入React开发的原因是将样式封装到这些组件。不存在将css泄漏到其他组件的风险。与其学习新的css组织结构，不如让新开发人员更快地上船。

尽管如此，它是限制性的，开发速度较慢，并添加了一些页面权重，通过应用相同的样式，您可以共享。

我发现最快的工作方法是使用纯css创建静态html网页，并以将其导入框架的方式将其组织起来。然后，您可以使用模板html设计，这些设计可以独立于编译器进行测试，在Internet、Firefox、chrome、移动设备和所有不同屏幕大小的情况下测试都要快得多。

如果要使用样式组件，可以使用此npm插件将静态css转换为与样式组件一起使用的变量- https://www.npmjs.com/package/@inspiraller/create-css-vars。

Nextjs不支持css导入，除非它是全局的，所以webpack编译选项是一个更普遍的解决方案。

Answer 2

样式组件的主要好处列在其网站的动机页面中。

样式-组件是因为我们想知道如何增强CSS来对组件系统进行样式化。通过专注于单个用例，我们设法优化了开发人员的体验以及最终用户的输出。 除了为开发人员提供更好的体验之外，样式组件还提供：

• 自动关键CSS:样式-组件跟踪哪些组件在页面上呈现，并注入它们的样式和其他任何东西，完全自动。与代码拆分相结合，这意味着您的用户加载所需的代码最少。
• 没有类名bug:样式组件为您的样式生成唯一的类名。你不必担心重复、重叠或拼写错误。
• 更容易删除CSS:很难知道在代码库中某个地方是否使用了类名。样式化-组件使它变得明显，因为每一点样式都绑定到特定的组件上。如果组件未使用(工具可以检测到)并被删除，那么它的所有样式都会随之被删除。
• 简单的动态样式:根据组件的道具或全局主题调整组件的样式是简单而直观的，无需手动管理数十个类。
• 无痛维护:您不必在不同的文件中寻找影响您的组件的样式，所以不管代码库有多大，维护都是小菜一碟。
• 自动供应商前缀:将CSS写到当前标准，并让样式化的组件来处理其余的部分。

使用样式化的组件，可以使用JavaScript代码“增强”CSS类，因为它们是用JS编写的。

const Input = styled.input`
  color: ${props => props.hasError ? 'red' : 'black'};
`;

与编写两个单独的CSS类和控件相反，这些类和控件将在JS中显示。

.text {
  color: black;
}

.text--danger {
  color: red;
}

<input className={`text ${hasError ? 'text--danger' : ''}`} />

从长远来看，它可以产生更易于维护的代码，但是如果使用它更好，这是个人的看法。

Answer 3

使用样式化的组件，您可以添加逻辑编程。