React/Next.js中如何用class替代className结合CSS Modules？

方案1：自定义Babel插件自动转换（推荐） #

Next.js支持自定义Babel配置，你可以写一个轻量插件，自动把JSX里的class属性转换成关联CSS Modules的className：

1. 项目根目录创建babel.config.js：

module.exports = {
  presets: ['next/babel'],
  plugins: [
    function classToClassNameWithModules() {
      return {
        visitor: {
          JSXAttribute(path) {
            // 定位class属性
            if (path.node.name.name === 'class') {
              // 替换属性名为className
              path.node.name.name = 'className';
              // 将字符串类名转为styles对象取值的表达式
              const classNameValue = path.node.value.value;
              path.node.value = {
                type: 'JSXExpressionContainer',
                expression: {
                  type: 'MemberExpression',
                  object: { type: 'Identifier', name: 'styles' },
                  property: {
                    type: 'Literal',
                    value: classNameValue,
                  },
                  computed: true,
                },
              };
            }
          },
        },
      };
    },
  ],
};

2. 确保每个组件都已导入对应的CSS Modules文件，比如：

import styles from './dark.module.scss';

这样你在JSX里写class="dark-mode-toggle"，编译后会自动变成className={styles["dark-mode-toggle"]}，无需手动修改大量代码。如果需要处理多类名（比如class="a b"），可以扩展插件逻辑，结合clsx实现多类名映射，记得先安装clsx依赖。

方案2：批量正则替换（适合静态类名场景） #

如果迁移的HTML代码都是静态类名（无动态拼接），可以用编辑器全局正则替换快速处理：

• 查找规则：class="([^"]+)"
• 替换规则：className={styles["$1"]}

若存在多类名，可替换为：
className={clsx(${["$1"].split(' ').map(c => styles["${c}"]).join(', ')})}
替换前需在组件中导入clsx：import clsx from 'clsx';

这个方案适合快速处理批量静态代码，动态类名需要手动调整。

方案3：自定义基础组件封装 #

创建通用基础组件，接收class属性并映射到CSS Modules：

// components/BaseElement.js
import clsx from 'clsx';

export default function BaseElement({ tag: Tag = 'div', class: className, styles, ...props }) {
  const mappedClass = clsx(
    className.split(' ').map(c => styles[c])
  );
  return <Tag className={mappedClass} {...props} />;
}

在业务组件中使用：

import BaseElement from '../components/BaseElement';
import styles from './dark.module.scss';

// 替代原生<div class="dark-mode-toggle">
<BaseElement class="dark-mode-toggle" styles={styles}>...</BaseElement>

这个方案无需配置编译工具，但需要将原生HTML标签替换为自定义组件，适合不想折腾配置的场景。

内容的提问来源于stack exchange，提问作者Gracie williams