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这个类名会直接变成全局类名，不会被哈希处理，任何地方都能使用