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

一尘不染

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

css

我有几个具有以下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是：

组件作用域，即样式仅应用于仅在此组件内呈现的内容。
如果卸载该组件，该组件的样式将消失。

但是，从浏览器进行检查时，样式在该<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配置的直接方法，但是网络上似乎有许多方法解决方法。

阅读 360

2020-05-16

共1个答案

一尘不染

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;

和一些CSS ./styles/button.css：

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

CSS模块执行完魔术后，生成的CSS将类似于：

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

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

替代

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

将其应用于您的示例，您可以使用：

.aboutContainer {
  # Some style
}

.aboutContainer__code {
  # Some style
}

基本上，您需要设置样式的所有元素都将具有唯一的类名。

2020-05-16