在 React 项目中实现 CSS 模块

react 中的 css 模块是一种通过自动生成唯一的类名来确定 css 范围的方法。这可以防止大型应用程序中的类名冲突并允许模块化样式。以下是在 react 项目中使用 css 模块的方法：

1. 设置

默认情况下，react 支持 css 模块。你只需要用扩展名 .module.css 命名你的 css 文件。

2. 设置示例

文件结构：

src/
├── components/
│   ├── button.js
│   ├── button.module.css

按钮.模块.css：

.button {
  background-color: #6200ea;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button:hover {
  background-color: #3700b3;
}

按钮.js：

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

const Button = () => {
  return (
    <button classname="{styles.button}">
      Click Me
    </button>
  );
}

export default Button;

运作原理：

• button.module.css：您可以像任何普通 css 文件一样定义 css 规则。
• styles.button：css 模块中的类名称作为 javascript 对象导入。您可以使用 styles.classname 引用它们。

好处：

• 作用域样式：每个类的作用域都是本地组件，避免名称冲突。
• 可维护性：随着应用程序的增长，您的 css 保持模块化并且更易于管理。

如果您需要特定案例的帮助，请告诉我！