如何使 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 导入理解不正确。

我在关注this tutorial

---

编辑

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

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

Answer 1

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

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
}

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

Answer 2

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

Answer 3

您可以使用 SASS (.scss) 来模仿作用域 CSS。

假设您只需要在一个组件中使用引导程序（以避免冲突）。将组件包装在 <div className='use-bootstrap'> 中，然后创建一个 .scss 文件，如下所示：

.use-bootstrap {   
  // Paste bootstrap.min.css here
}

Answer 4

因为你提到你使用了create-react-app，所以这里的解决方案很容易将style.css更改为style.module.css，它看起来像这样：

import styles from "./style.css"
<button className={styles.button}>blabla</button>

关于这篇文章的更多信息： https://blog.bitsrc.io/how-to-use-sass-and-css-modules-with-create-react-app-83fa8b805e5e

Answer 5

使用此文件命名约定[name].module.css 并查看文档：https://create-react-app.dev/docs/adding-a-sass-stylesheet

JSX 文件

import React from 'react';
import styles from './index.module.scss';

const MyPage = () => {
    return (
        <div className={styles}>
            <h1>My Page</h1>
        </div>
    );
};

export default MyPage;

样式文件

    h1 {
        color: #f3f3f3;
        font-family: "Cambria";
        font-weight: normal;
        font-size: 2rem;
    }