添加 CSS Modules 样式表

注意:此功能适用于 react-scripts@2.0.0 及更高版本。

该项目使用 [name].module.css 文件命名约定支持 CSS Modules 和常规 CSS 。 CSS Modules 允许通过自动创建 [filename]\_[classname]\_\_[hash] 格式的唯一 classname 来确定 CSS 的作用域。

提示: 如果要使用 Sass 预处理 CSS,请确保 按照安装说明进行操作 ,然后将 CSS 文件扩展名更改为:[name].module.scss[name].module.sass

CSS Modules 允许你在不同的文件中使用相同的 CSS classname,而无需担心命名冲突。 在此处 了解有关 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'; // 将 css modules 文件导入为 styles
import './another-stylesheet.css'; // 导入常规 CSS 文件

class Button extends Component {
  render() {
    // 作为 js 对象引用
    return <button className={styles.error}>Error Button</button>;
  }
}

结果

不会和其他 .error 类名冲突

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

还有一个可选功能。 完全支持常规 <link> 样式表和CSS文件。对于以 .module.css 扩展名结尾的文件,将切换到 CSS Modules。


上一篇:添加一个样式表
下一篇:添加 Sass