CSS Modules 是一种在 JavaScript 项目中管理样式的方法，它可以帮助你避免全局样式污染，并实现更精细的样式封装。下面将为你详细介绍 CSS Modules 的基本概念和使用方法。

基本概念

CSS Modules 通过将 CSS 类名局部化来工作。这意味着每个组件的样式都是独立的，不会影响到其他组件。

优点

  • 局部化类名：避免全局样式污染。
  • 按需导入：只导入需要的样式。
  • 模块化：使样式管理更加清晰。

使用方法

以下是在一个 React 项目中使用 CSS Modules 的示例。

安装

首先，确保你的项目中已经安装了 style-loader 和 css-loader。

npm install style-loader css-loader

创建模块

在你的组件文件中，引入 styled-components 库。

import styled from 'styled-components';

然后，创建一个模块化的样式。

const Button = styled.button`
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
`;

export default Button;

使用样式

在你的组件中，导入并使用这个样式。

import React from 'react';
import Button from './Button';

const App = () => (
  <div>
    <Button>点击我</Button>
  </div>
);

export default App;

扩展阅读

想要了解更多关于 CSS Modules 的内容，可以阅读 官方文档。

图片示例

CSS Modules