添加 CSS Modules 样式表

注意：此功能适用于 [email protected] 及更高版本。

该项目支持 CSS Modules，以及使用 [name].module.css 文件命名约定的常规样式表。CSS Modules 通过自动创建格式为 [filename]\_[classname]\_\_[hash] 的唯一类名来实现 CSS 的作用域。

提示：如果你想使用 Sass 预处理样式表，请确保 按照安装说明进行操作，然后更改样式表文件扩展名，如下所示：[name].module.scss 或 [name].module.sass。

CSS Modules 允许你在不同的文件中使用相同的 CSS 类名，而无需担心命名冲突。了解更多关于 CSS Modules 的信息 这里.

Button.module.css

.error {
  background-color: red;
}

another-stylesheet.css

.error {
  color: red;
}

Button.js

import React, { Component } from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
import './another-stylesheet.css'; // Import regular stylesheet

class Button extends Component {
  render() {
    // reference as a js object
    return <button className={styles.error}>Error Button</button>;
  }
}

结果

不会与其他 .error 类名冲突

<!-- This button has red background but not red text -->
<button class="Button_error_ax7yz">Error Button</button>

这是一个可选功能。 常规 <link> 样式表和 CSS 文件完全受支持。 CSS 模块对以 .module.css 扩展名结尾的文件启用。