react使用CSS Modules解决组件间样式覆盖问题

CSS Modules

● CSS Modules通过对CSS类名重命名，保证每个类名的唯一性，从而避免样式冲突的问题
● 所有类名都具有“局部作用域”，只在当前组件内部生效
● CSS Modules
● 命名： BEM(Block块、Element元素、Modifier三部分组成)命名规范，比如：list_item_active
● 在React脚手架中演化为：文件名、类名、hash（随机）三部分，只需要指定类名即可
[filename]_[classname]__[hash]

// 类名
.error {}
// 生成后的类名
.Button_error__ax7yz

React中使用CSS Modules

● 创建名为[name].modules.css的样式文件（React脚手架中的约定，与普通css作区分）

// 创建样式文件名
index.module.css

● 组件导入该样式文件

import styles from './index.module.css'

● 通过styles对象访问对象中的样式名来设置样式

<div className={style.test}></div>