在react js中使用样式的最佳（最佳）方法

Question

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

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

以上方法是否影响网站加载速度？我该使用哪种方法来获得正确的代码结构？他们在专业项目中使用什么方法？

Answer 1

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

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

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

Styled-component，js中的CSS，可能在react-based-based world]中更合适，因为对于您设置样式的每个“类”，都会生成UNIQE className +它通过使用props /状态修改类的样式，与其他情况不同，对于backgroundColor更改，您将需要2个类。

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

Answer 2

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