在React JS中使用样式的最佳（最佳）方法

Question

在React js中使用样式的方法太多，这让我感到困惑。 例如：

• 普通CSS
• JS中的CSS
• 样式化的组件
• Sass和SCSS

以上方法是否影响网站加载速度？ 这两种方法有什么区别？

Answer 1

性能都是一样的，当您运行npm run build时，所有这些都转换为纯CSS。

CSS具有其优点，因为它对设计人员友好，但是如果不小心将两个具有相同名称的类（这是将CSS分成多个文件的情况），则可能会引起一些问题，如果发生这种情况，则会使调试成为噩梦（我自己去过那里。

Sass与css有相同的问题，但这是更酷的css的一种方法:)

样式化组件，js中的CSS，可能更适合基于组件的反应世界，因为对于您样式化的每个“类”，都会生成UNIQE className +它为您提供了更多功能通过使道具/状态修改类的样式，与其他更改 backgroundColor 的样式不同，您将需要2个类。

有很多方法可以做到，最适合我的最佳比较文章是在这里：https://www.sitepoint.com/react-components-styling-options/

Answer 2

请尽可能尝试使用SCSS。它有助于组织样式，并且将以任何方式处理为CSS。因此，字面上没有任何缺点。

对于简单的样式，我建议使用普通的CSS类（在.scss文件中）。

对于复杂的动画或样式逻辑，请结合使用JavaScript和framer-motion等现有动画库。这样一来，您可以更好地控制正在发生的事情，并拥有更多使网站变得出色和独特的可能性。