在 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 保持模块化并且更易于管理。

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

以上是在 React 项目中实现 CSS 模块的详细内容。更多信息请关注PHP中文网其他相关文章！