CSS Module 常用笔记

Date: January 30, 2025

CSS

先介绍下普通 CSS，再简明介绍下 css module 的使用

普通 CSS

内联 style

定义：

• 内联 style 是通过在元素的 style 属性中直接设置 CSS 样式。
• 这种方式允许我们直接在 JSX 中为组件或元素添加样式。

写法：

<div style={
  
  { color: 'red', fontSize: '20px' }}>
  This is a red text with font size 20px.
</div>

---

className

定义：

• className 是通过 CSS 类为元素设置样式。在 React 中，使用 className 替代传统的 class 属性。
• className 通过引用外部样式表来定义样式，适合复用和组织大规模的样式。

写法：

<div className="red-text large-text">
  This is a styled text.
</div>

---

---

CSS Module

概念：

CSS Module 是一种局部作用域的CSS方案，它通过将CSS类名局部化，避免了全局命名冲突的问题。每个CSS类都默认是局部的，只有在特定的组件中才有效。

特点：

1. 局部作用域：每个CSS类都只作用于当前组件，避免了全局样式污染。
2. 自动命名：CSS类名会自动生成一个唯一的标识符，以确保类名不重复。
3. 与组件绑定：CSS模块与React（或其他框架）中的组件紧密绑定，每个组件都有独立的样式。

工作原理：

CSS文件中的类名会被编译器处理成唯一的类名（例如：Button__primary__1k2jd），这个类名与组件的作用域绑定，避免了全局命名冲突。

使用方式：

1. 创建一个 .module.css 的CSS文件：

   /* Button.module.css */
   .primary {
        
        
     color: r