面试题：React中如何在组件内使用CSS Modules进行样式管理

Question

请描述在React项目中使用CSS Modules来管理组件样式的步骤，并举例说明如何在组件内引入和使用这些样式。

Answer 1

1. 安装相关依赖

确保项目中安装了支持 CSS Modules 的 loader，一般在 Create React App 创建的项目中已默认支持。若手动搭建项目，需安装 css-loader 等相关依赖，并在 webpack 配置中启用 CSS Modules。例如：

npm install css-loader --save-dev

2. 创建 CSS Modules 文件

在组件目录下，创建与组件同名的 .module.css 文件。例如，有一个 Button.js 组件，就创建 Button.module.css 文件。

3. 编写样式

在 .module.css 文件中编写组件样式。例如在 Button.module.css 中：

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

.button:hover {
  background-color: darkblue;
}

4. 在组件内引入和使用样式

在 React 组件中引入 CSS Modules 文件，并使用导入的样式对象。以 Button.js 为例：

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

const Button = () => {
  return <button className={styles.button}>点击我</button>;
};

export default Button;

这样就通过 CSS Modules 实现了组件样式的管理，每个组件的样式都被封装在对应的 CSS Modules 文件中，避免了全局样式冲突。