React 中 CSS Modules：深入浅出

前言

React 中的 CSS Modules 是一种用于将样式与组件隔离的 CSS 规范，它允许您为每个组件创建独立的样式表，从而避免样式冲突和提高代码的可维护性。本文将介绍 CSS Modules 的基本使用，包括如何在 React 中使用它们、如何编写 CSS Modules 样式表以及如何导入和使用这些样式表。

1. 如何在 React 中使用 CSS Modules

要开始使用 CSS Modules，您需要首先创建一个新的样式文件。该文件必须以 .module.css 或 .module.scss 后缀命名，以便 React 能够识别它。例如，您可以创建一个名为 MyComponent.module.css 的文件。

接下来，您需要在您的组件中导入该样式文件。您可以使用 import 语句来完成此操作。例如，在以下代码中，我们正在将 MyComponent.module.css 文件导入到 MyComponent 组件中：

import styles from './MyComponent.module.css';

导入样式文件后，您就可以使用它们来为组件中的元素设置样式了。您可以使用 className 属性来应用样式，如下所示：

<div className={styles.myClass}>Hello world!</div>

2. 如何编写 CSS Modules 样式表

CSS Modules 样式表与普通的 CSS 样式表非常相似，但它们有一些额外的功能。这些功能允许您为每个组件创建独立的样式，并避免样式冲突。

在 CSS Modules 样式表中，您可以使用本地作用域选择器来为组件中的元素设置样式。本地作用域选择器以组件的名称开头，后跟一个连字符和元素的名称。例如，以下选择器将为 MyComponent 组件中的所有

.MyComponent-div {
  color: red;
}

body {
  background-color: black;
}