基于Mantine的React组件库在Next.js中类名重写问题求助

一、修复CSS Modules类名不匹配问题 #

1. 对齐组件库与Next.js的类名生成规则 #

在组件库的Rollup配置中，修改rollup-plugin-styles的CSS Modules选项，固定类名哈希算法和前缀，和Next.js SWC的默认规则对齐：

// rollup.config.js
import styles from 'rollup-plugin-styles';

export default {
  plugins: [
    styles({
      modules: {
        hashPrefix: 'your-library-name',
        generateScopedName: '[name]__[local]___[hash:base64:5]',
      },
    }),
  ],
};

2. 让Next.js跳过组件库的CSS Modules重写 #

在Next.js项目的next.config.js中，将组件库纳入编译范围，并配置SWC不对其CSS Modules文件进行重写：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['your-component-library-name'],
  compiler: {
    cssModules: {
      exclude: /node_modules\/your-component-library-name\/.*\.module\.css$/,
    },
  },
};

module.exports = nextConfig;

二、修复styled-components类名不匹配警告 #

Next.js 12+自带SWC的styled-components插件，无需禁用SWC，直接在next.config.js中启用即可：

// next.config.js
const nextConfig = {
  compiler: {
    styledComponents: true,
  },
};

module.exports = nextConfig;

同时确保组件库打包时保留styled-components的SSR关键代码：

• 在组件库的package.json中添加"sideEffects": true
• Rollup配置中避免压缩时移除类名和函数名：

// rollup.config.js
import { terser } from 'rollup-plugin-terser';

export default {
  plugins: [
    terser({
      keep_classnames: true,
      keep_fnames: true,
    }),
  ],
};

三、统一SSR与CSR的样式注入逻辑 #

确保组件库的样式在Next.js SSR阶段能被正确注入：

• 对于CSS Modules，通过rollup-plugin-styles的injectType: 'singletonStyleTag'配置，保证SSR时生成全局唯一的样式标签
• 对于styled-components，组件库内的所有styled组件要保留displayName，避免Tree Shaking移除标识

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