在 react js 中使用样式的最佳（最佳）方式 [关闭]

Question

关闭。 这个问题是基于意见的。 它目前不接受答案。

---

想改善这个问题吗？ 更新问题，以便通过编辑这篇文章用事实和引文来回答问题。

1 年前关闭。

改进这个问题

在 react js 中有很多使用样式的方法，这让我很困惑。 例如 ：

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

以上方法对网站加载速度有影响吗？ 这些方法有什么区别？

Answer 1

性能都是一样的，当你运行：npm run build 时，它们都被翻译成普通的 CSS。

CSS 有它的好处，因为设计者友好，但你可能会因为不小心创建 2 个同名的类而遇到一些问题（这是当你将 CSS 拆分成许多文件时）如果发生这种情况，它会使调试成为一场噩梦（我自己也去过那里） ）。

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

样式化组件，js 中的 CSS，可能更适合基于React组件的 world ，因为对于您设置样式的每个“类”，都会生成一个 UNIQE className + 它通过让 props/state 修改类的样式来为您提供更多功能，不像其他人那样改变backgroundColor需要 2 个类。

有很多方法可以做到这一点，在我开始时对我很有帮助的最佳比较文章在这里： https : //www.sitepoint.com/react-components-styling-options/

Answer 2

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

对于简单的样式，我会推荐普通的 css 类（在 .scss 文件中）。

对于复杂的动画或样式逻辑，将 javascript 与现有动画库（如framer-motion ）结合使用。 这样您就可以更好地控制正在发生的事情，也有更多的可能性使您的网站出色而独特。