如何混淆material-ui生成的CSS类名以获取非确定性类名？

针对你使用Gatsby框架需要修改@material-ui/core组件默认确定性类名的需求，可通过以下步骤实现：

1. 确认依赖 #

首先确保项目已安装@material-ui/styles包，该包提供自定义类名生成的核心能力。

2. 实现自定义类名生成器 #

创建工具文件src/utils/generateClassName.js，写入以下代码：

import { createGenerateClassName } from '@material-ui/core/styles';

// 生成非确定性类名的配置
export const customGenerateClassName = createGenerateClassName({
  disableGlobal: true, // 核心配置，关闭默认的Muixxx格式确定性全局类名
  productionPrefix: 'css', // 生产环境类名前缀，可自定义任意字符串
  seed: 'custom-random-seed', // 随机种子，避免和其他项目类名冲突
});

3. 全局注入配置 #

需要同时修改Gatsby的服务端渲染和浏览器端配置，保证两端生成的类名一致避免水合错误。
在项目根目录的gatsby-ssr.js和gatsby-browser.js两个文件中，写入完全相同的以下代码：

import React from 'react';
import { StylesProvider } from '@material-ui/core/styles';
import { customGenerateClassName } from './src/utils/generateClassName';

export const wrapRootElement = ({ element }) => {
  return (
    <StylesProvider generateClassName={customGenerateClassName}>
      {element}
    </StylesProvider>
  );
};

如果你项目中使用了ThemeProvider自定义主题，需要将StylesProvider放在ThemeProvider的外层，保证配置生效。

4. 清理缓存重启项目 #

Gatsby缓存会残留旧的类名配置，修改完成后执行命令清理缓存并重启服务：

# 开发环境
gatsby clean && gatsby develop

# 生产构建
gatsby clean && gatsby build

配置完成后，@material-ui/core的所有组件都会生成非确定性的动态类名，和@material-ui/core/styles生成的类名格式保持一致。

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