CSS modules

CSS 模块是 CSS 文件，其中类名、动画和媒体查询默认在本地范围内。它们提供了一种将样式封装在组件内的方法，防止全局冲突并通过仅打包使用的选择器来优化最终输出。

创建 CSS 模块文件

首先创建 CSS 模块文件。通常，这些文件具有 .module.css 扩展名，例如 style.module.css 。但是，您也可以使用其他扩展，例如 .scss 和 .sass 。

.foo {
  color: red;
}
.bar {
  background-color: blue;
}

注意：避免在 CSS 模块中使用 HTML 标签。由于它们不被视为是纯选择器，因此可能会导致特异性问题，从而导致更难以用其他样式覆盖并导致意外行为。

在组件中使用模块

1. 导入样式：在组件文件（例如 Component.jsx ）中，从 CSS 模块导入样式。

import styles from "styles.module.css";

2. 应用样式：通过将导入的样式引用为 JSX 中样式对象的属性来使用它们：

function Component() {
  return (
    <>
      <div class={`${styles.foo} ${styles.bar}`}>Hello, world!</div>
    </>
  );
}

3. Using a single style: 如果您只需要模块中的一种样式，直接导入并应用它：

import styles from "styles.module.css";

function Component() {
  return (
    <>
      <div class={styles.foo}>Hello, world!</div>
    </>
  );
}

4. 与常规类名混合使用：您还可以将 CSS 模块语法与常规字符串类名结合使用：

import styles from "styles.module.css";

function Component() {
  return (
    <>
      <div class={`${styles.foo} container`}>Hello, world!</div>
    </>
  );
}

注意：如果你的样式名称中有中划线，使用括号语法：

const className = styles["foo-with-dash"];