如何在ReactJS中使用CSS？

Question

我刚接触reactJS和ES6，已经了解了很多关于CSS的问题，他们试图解决的是全局的style.css文件，而是使用

styles/index.js

var styles = {
  transparentBg: {
    background: 'transparent'
  }
};

许多人认为，如果你没有数百个CSS类，则应该回到每个类中编写CSS（我不知道react的CSS名称是什么，如上面的代码）而不是一个单独的文件。这感觉很奇怪。这是真的吗？

许多CSS框架，如流行的Bootstrap仍然使用“旧”的CSS。这有关系吗？请注意，应用程序仍然可以正常工作，但肯定有一些原因导致React选择以这种方式进行操作。我能做些什么呢？

在使用ReactJS时，使用CSS和CSS框架的最佳实践是什么？

- Anders

---

这个问题可能过于宽泛、基于观点或需要讨论，因此不适合在 Stack Overflow 上进行。如果您有一个具体的、可回答的编程问题，请提供完整的细节。 - Paulie_D

Answer 1

这是主观的，但在我看来，使用CSS Modules和PostCSS通过传统的CSS更加实用。

例如，您可能有一个像这样的CSS文件：

.btn {
  border: 1px solid black;
  border-radius: 2px;
}

.icon {
  background: url(...);
}

通过css-loader?modules=true将其作为React组件使用，如下所示：

import React from 'react';
import s from './Button.css';

function Button() {
  return (
    <button className={s.btn}><i className={s.icon} />Click Me</button>
  );
}

export default Button;

使用CSS Modules的魔力，该组件将在调试（开发）模式下呈现为以下HTML标记：

<button class="Button_btn_d41d8"><i class="Button_icon_7b91e"></i>Click Me</button>

每个CSS类名都由<ComponentName>-<ClassName>-<Hash>组成，有效避免了多个组件中具有相同名称的CSS类名之间的冲突。在发布（生产）环境中，相同的组件将呈现为：

<button class="d41d"><i class="7b91"></i>Click Me</button>

每个类名都是一个仅由4-5个字符组成的哈希字符串。

这就是在React Starter Kit中的工作方式（免责声明：我是作者）

- Konstantin Tarkus

Answer 2

在React中编写CSS没有“正确”的方式。我将向您提供一些选项，您可以尝试并选择最适合您的选项。

React中的内联CSS：
Aphrodite 和 Radium

或者您可以继续使用.css文件： Sass，Less，Stylus和PostCSS。

- KadoBOT

---

使用旧的 .css 文件是否会有负面影响（例如性能）？ - Anders

我喜欢使用内联样式来保持所有内容在一个文件中，而且我可以使用动态JS值，但是并没有性能问题使用常见的.css文件。 - KadoBOT

Answer 3

这是一个比较主观的问题，但我建议您继续使用经典的.css，可能加上一些预处理器。我知道追求具有完全可移植性并包含所有逻辑和样式的组件很时髦，但我认为最清晰的方法是将css用于已创建的内容。

代码库保持更易读，并且您会发现始终有更多的支持和资源可供经典工作流程使用。

- ciaoben