React学习———CSS Modules（样式模块化）
CSS Modules
CSS Modules（样式模块化）是一种用于模块化和局部作用域化CSS样式的技术，让CSS只在当前组件内生效，避免全局样式冲突的技术方案
工作原理
- 文件命名：通常以
.module.css、.module.less、.module.scss等结尾：例如：index.module.less - 局部作用域：
CSS Modules通过为类名生成唯一的哈希值，确保样式不会与其他模块的样式冲突
/* index.module.less */
.root {background: #fff;
}
每个样式类名在编译时会被自动生成一个独一无二的哈希后缀，编译后的类名可能变成root__3k2jf_1，只在当前组件内生效
- 模块化导入：在
JavaScript或TypeScript中，可以直接导入CSS Modules文件，并通过对象的形式访问类名 - 支持组合：
CSS Modules允许通过composes关键字组合多个类名，实现样式的复用
.base{padding: 10px;
}
.button{composes: base;background-color: blue;
}
- 与构建工具集成：
CSS Modules通常与Webpack、Vite等构建工具结合使用，通过配置启用模块化功能，例如，在Webpack中可以通过css-loader的modules选项启用CSS Modules
典型用法
// Button.modules.css
.button {background-color: #007bff;color: white;padding: 10px 20px;border: none;border-radius: 5px;
}.button:hover {background-color: #0056b3;
}// React 组件中
import React from 'react'
import styles from './Button.modules.css'const Button = () => {<button className={styles.button}>点击</button>
}
export default Button
全局样式
- :global：是CSS Modules（样式模块化）的一个特殊语法，用于声明全局样式。
.root {...:global {.logo-wrap { ... }}
}
1、.root依然是局部样式，只在当前组件生效
2、:global里的.logo-wrap这个类名会直接变成全局类名，不会被哈希处理，任何地方都能使用