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成为：

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

但是，从浏览器进行检查时，样式在<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

修改

Brett的回答是正确的。但是，我的问题变成了其他地方。我使用create-react-app创建了我的应用程序，这基本上简化了执行React所需的设置。它包括WebPack，Babel和其他要开始的事情。它使用的默认WebPack配置未为css-loader设置module option，因此默认为false，因此未启用本地范围。

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

Answer 1

听起来CSS Modules可以满足您的需求。

CSS模块是一个CSS文件，默认情况下，所有类名和动画名都在本地作用域。所有URL（url（...））和@imports都是模块请求格式（./xxx和../xxx表示相对，xxx和xxx / yyy表示在modules文件夹中，即在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模块执行它之后，生成的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

您可以使用SASS（.scss）来模拟作用域CSS。

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

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

Answer 3

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

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 并查看文档：{{3}}

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;
    }

如何使React CSS导入组件作用域？

5 个答案: