react .module.css的用法

在 React 中，通常使用 CSS modules 来管理组件的样式。CSS modules 允许在组件中使用本地化的 CSS 类名，以避免全局 CSS 类名的冲突，并提供更好的样式隔离性。

在使用 CSS modules 时，需要将样式文件的后缀名改为 `.module.css`，例如 `Button.module.css`。在组件中引用样式时，可以使用 `import styles from "./Button.module.css"` 的语法来导入样式，并通过 `styles` 对象来访问样式中定义的 CSS 类。

例如，假设有一个名为 `Button` 的组件，它的样式文件为 `Button.module.css`，其中定义了一个名为 `button` 的 CSS 类：

/* Button.module.css */
.button {
  background-color: blue;
  color: white;
}

那么在 `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;

这样，当 `Button` 组件被渲染时，它的 `button` 元素会自动添加一个本地化的 CSS 类名，例如 `_Button_module_css__button__3g0L6`，从而保证样式的唯一性和隔离性。