在 React js 中使用样式的最佳（最佳）方法 [关闭]答案

【问题标题】：best (optimal) way to use style in react js [closed]在 React js 中使用样式的最佳（最佳）方法 [关闭]
【发布时间】：2020-03-25 12:03:57
【问题描述】：

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

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

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

【问题讨论】：

我觉得这个link对学习方法和比较方法很有用

标签： css reactjs styles

【解决方案1】：

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

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

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

styled-component，js 中的 CSS，可能更适合 react 基于组件的世界，因为对于您设置样式的每个“类”，都会生成一个 UNIQE 类名 + 它为您提供更多功能通过让 props/state 修改类的样式，不像其他需要 backgroundColor 更改的类，您需要 2 个类。

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：