怎么在 React 中使用 css modules-JavaScript中文网-JavaScript教程资源分享门户

在 React 中，我们经常需要使用 CSS 来美化页面，但是在大型项目中，全局 CSS 可能会变得非常混乱和难以维护。为了解决这个问题，我们可以使用 CSS Modules 来管理 CSS。

CSS Modules 是一种将 CSS 模块化的方法，它可以将 CSS 样式表打包成独立的模块，并通过 JavaScript 引用。这样，每个模块都有自己的作用域，不会与其他模块的样式发生冲突。

安装和配置

首先，我们需要安装 css-loader 和 style-loader，它们是 Webpack 的两个 loader，用于加载和解析 CSS 文件。

npm install --save-dev css-loader style-loader

然后，我们需要在 Webpack 的配置文件中添加以下代码：

// javascriptcn.com 代码示例
{
  test: /\.css$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true
      }
    }
  ]
}

这个配置告诉 Webpack 在加载 CSS 文件时使用 style-loader 和 css-loader，并开启 CSS Modules。

在组件中使用

现在，我们可以在 React 组件中使用 CSS Modules 了。假设我们有一个 Button 组件，它的样式定义在 Button.module.css 文件中：

.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border: none;
}

我们可以在 Button.js 文件中通过 import 引入样式表：

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

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

这里，我们通过 import 引入了 Button.module.css 文件，并将其赋值给 styles 变量。然后，在组件中使用 styles.button 来引用样式。

注意，styles.button 不是一个字符串，而是一个对象。这个对象包含了样式表中定义的所有类名，并且每个类名都被映射成一个唯一的标识符。这样，我们可以避免类名冲突的问题。

高级用法

CSS Modules 还支持一些高级用法，例如：

全局样式

有时候，我们需要在全局范围内定义一些样式，例如重置默认样式或者定义网站的主题颜色。在 CSS Modules 中，我们可以使用 :global 关键字来定义全局样式。

// javascriptcn.com 代码示例
:global {
  body {
    background-color: #f0f0f0;
  }
}

.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border: none;
}

这里，我们使用 :global 关键字来定义了一个全局样式，它会应用到整个页面的 body 元素上。

继承样式

有时候，我们需要在一个样式类中继承另一个样式类的样式。在 CSS Modules 中，我们可以使用 composes 关键字来实现继承。

// javascriptcn.com 代码示例
.button {
  composes: baseButton from './BaseButton.module.css';
  background-color: blue;
  color: white;
  padding: 10px;
  border: none;
}

.baseButton {
  background-color: #f0f0f0;
  color: black;
}

这里，我们使用 composes 关键字来将 button 类继承了 baseButton 类的样式。

总结

CSS Modules 是一种将 CSS 模块化的方法，它可以将 CSS 样式表打包成独立的模块，并通过 JavaScript 引用。在 React 中使用 CSS Modules 可以避免全局 CSS 的混乱和冲突，提高代码的可维护性和可读性。

在使用 CSS Modules 时，我们需要安装和配置 css-loader 和 style-loader，并在组件中使用 import 引入样式表。此外，CSS Modules 还支持一些高级用法，例如全局样式和继承样式。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6581a93bd2f5e1655dce6225