如何使 React CSS 导入组件范围？

Question

我有几个组件具有以下 CSS/组件结构

About/style.css

 .AboutContainer {
    # Some style
}

p > code {
    # Some style
}

我在组件中导入CSS如下

About/index.js

 import './style.css';

export default class About extends Component {
    render() {
         # Return some component
    }
}

但是，CSS 在 <header> 部分中导入并保持全局范围。

我期待 CSS 是：

1. 组件范围内的样式仅应用于 仅 在此组件内呈现的事物。
2. 如果组件被卸载，该组件的样式将会消失。

但是，从浏览器检查时，样式在 <header> 部分指定，并应用于所有组件

<header>
   // Stuff
   <style type="text/css">style for component About</style>
   <style type="text/css">style for component B</style>
   <style type="text/css">style for component C</style>
   // Stuff
</header>

如何将 CSS 导入组件范围？似乎我对 React ES6 中的 CSS 导入理解不正确。

我正在关注 本教程

---

编辑

布雷特的回答是正确的。但是，我的问题原来在其他地方。我使用 create-react-app 创建了我的应用程序，它基本上简化了执行 React 所需的设置。它包括 WebPack、Babel 和其他上手的东西。它使用的默认 WebPack 配置没有为 css-loader 设置 模块选项，因此它默认为 false ，因此未启用本地范围。

只是为了获得更多信息，create-react-app 似乎没有直接的方法来自定义 WebPack 配置，但网络上似乎有很多方法解决方法。

原文由 Harry Cho 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

听起来 CSS Modules 或许多其他 CSS-in-JS 包可以满足您的需求。其他包括 Emotion （我目前最喜欢的）、 Styled Components 或 这里 的许多包。

CSS 模块是一个 CSS 文件，默认情况下，所有类名和动画名都在本地范围内。所有 URL (url(…)) 和 @imports 都是模块请求格式（./xxx 和 ../xxx 表示相对，xxx 和 xxx/yyy 表示在模块文件夹中，即在 node_modules 中）。

这是一个简单的例子：

假设我们有一个 React 组件，例如：

 import React from 'react';
import styles from './styles/button.css';

class Button extends React.Component {
  render() {
    return (
      <button className={styles.button}>
        Click Me
      </button>
    );
  }
}
export default Button;

以及 ./styles/button.css 中的一些 CSS：

 .button {
  border-radius: 3px;
  background-color: green;
  color: white;
}

在 CSS Modules 执行之后，生成的 CSS 会是这样的：

 .button_3GjDE {
  border-radius: 3px;
  background-color: green;
  color: white;
}

其中 _3DjDE 是随机生成的哈希 - 为 CSS 类提供唯一名称。

替代

一个更简单的替代方法是避免使用通用选择器（如 p 、 code 等），并为组件和元素采用基于类的命名约定。即使是像 BEM 这样的约定也有助于防止您遇到的冲突。

将此应用于您的示例，您可能会使用：

 .aboutContainer {
  # Some style
}

.aboutContainer__code {
  # Some style
}

基本上，您需要设置样式的所有元素都会收到一个唯一的类名。

原文由 Brett DeWoody 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

也许 react-scoped-css 会有所帮助。顺便说一句，我是这个库的作者，如果您发现任何问题或只是想改进它，您可以随时提出问题或发送 pr。

原文由 Liang 发布，翻译遵循 CC BY-SA 4.0 许可协议