CSS Modules

CSS Modules：CSS模块，对CSS进行模块化处理

目的：解决在 React 开发时，组件之间类名重复导致的样式冲突问题

使用后：会自动生成类名

类名格式：[filename]_[classname]__[hash]

• filename：文件名
• classname：CSS文件中的类名
• hash：随机生成的hash值

使用：

1. 创建样式文件 以 .module.scss 结尾
2. 样式文件以 CSS 方式写，类名推荐使用驼峰命名法
3. 导入样式文件 import style from './index.module.scss'
4. 结构中使用，通过 className={ styles.类名 }

全局样式： 通过 :global() 来包裹，就会变成全局类名

:global(.title) {
  color: red;
}

配合 SASS 使用

每个组件的根节点使用 CSSModules 形式的类名，其他所有子节点都使用普通的CSS类名

.root {
  // 根节点自己的样式
  
  :global {
    // 所有子节点的样式，都放在此处，因为是在 global 中，所以，此处的类名不会被 CSSModules 处理
    .header {}
    .main {}
  }
}

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

const Layout = () => {
  return (
  	<div className={styles.root}>
      <Header className="header">
        <div className="main" />
      </Header>
    </div>
  )
}