CSS Modules 教程

1. 简介

CSS Modules 是一种在 React 项目中管理 CSS 样式的方法，它允许你将 CSS 类名局部化，避免全局命名冲突。通过 CSS Modules，每个组件的样式都被封装在组件内部，不会影响到其他组件。

2. 环境搭建

在使用 CSS Modules 之前，你需要确保你的 React 项目已经正确搭建。通常，你可以使用 Create React App 来快速创建一个 React 项目。

npx create-react-app my-app
cd my-app
npm start

3. 启用 CSS Modules

在 Create React App 中，默认情况下已经支持 CSS Modules。你只需要将 CSS 文件命名为 *.module.css 即可。

例如，创建一个名为 Button.module.css 的文件：

/* Button.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

4. 使用 CSS Modules

在 React 组件中使用 CSS Modules 非常简单。你只需要导入 CSS 文件，并将其类名应用到 JSX 元素上。

// Button.js
import React from 'react';
import styles from './Button.module.css';

function Button() {
  return <button className={styles.button}>Click me</button>;
}

export default Button;

5. 类名局部化

CSS Modules 会自动将 CSS 类名转换为唯一的标识符，以确保类名不会与其他组件的类名冲突。例如，styles.button 可能会被转换为类似于 Button_button__2M2Gz 的类名。

6. 组合类名

你还可以组合多个类名，以应用多个样式。

// Button.js
import React from 'react';
import styles from './Button.module.css';

function Button() {
  return (
    <button className={`${styles.button} ${styles.primary}`}>
      Click me
    </button>
  );
}

export default Button;

7. 动态类名

你可以根据条件动态应用类名。

// Button.js
import React from 'react';
import styles from './Button.module.css';

function Button({ isPrimary }) {
  return (
    <button className={`${styles.button} ${isPrimary ? styles.primary : ''}`}>
      Click me
    </button>
  );
}

export default Button;

8. 实践练习

练习 1: 创建一个带有样式的按钮组件

1. 创建一个名为 Button.module.css 的文件，定义两个类名：button 和 primary。
2. 创建一个名为 Button.js 的 React 组件，导入 Button.module.css，并根据 isPrimary 属性动态应用类名。
3. 在 App.js 中使用 Button 组件，并传递 isPrimary 属性。

练习 2: 创建一个带有样式的导航栏组件

1. 创建一个名为 Navbar.module.css 的文件，定义导航栏的样式。
2. 创建一个名为 Navbar.js 的 React 组件，导入 Navbar.module.css，并将样式应用到导航栏的各个部分。
3. 在 App.js 中使用 Navbar 组件。

9. 总结

CSS Modules 是一种强大的工具，可以帮助你在 React 项目中更好地管理 CSS 样式。通过局部化类名，你可以避免全局命名冲突，并使样式更易于维护。希望这篇教程能帮助你更好地理解和使用 CSS Modules。

10. 进一步学习

• 探索如何在大型项目中组织 CSS Modules。
• 学习如何在 CSS Modules 中使用预处理器（如 Sass 或 Less）。
• 了解如何在 CSS Modules 中使用全局样式。

通过这些练习和进一步的学习，你将能够更熟练地使用 CSS Modules，并在实际项目中应用它们。