Material UI v5仅用MUI System(sx)时createGenerateClassName替代方案

MUI v5+全量使用MUI System（sx）实现样式时，旧版createGenerateClassName的替代方案为通过Emotion缓存配置自定义类名前缀，具体操作如下：

• 安装必要依赖（默认MUI v5项目已内置，缺失时执行）：
  npm install @emotion/cache @emotion/react
• 创建自定义Emotion缓存，指定唯一类名前缀：

  import createCache from '@emotion/cache';
  
  // key值为自定义类名前缀，不同应用设置不同值即可隔离类名
  const customMuiCache = createCache({
    key: 'yourAppUniquePrefix',
    prepend: true
  });
  

• 根组件入口用CacheProvider包裹应用，搭配ThemeProvider配置即可生效：

  import { CacheProvider } from '@emotion/react';
  import { ThemeProvider, createTheme } from '@mui/material/styles';
  import CssBaseline from '@mui/material/CssBaseline';
  import App from './App';
  import { customMuiCache } from './customMuiCache';
  
  // 如需修改组件自带Mui前缀，可额外配置classNamePrefix
  const theme = createTheme({
    classNamePrefix: 'yourAppUniquePrefix-Mui'
  });
  
  function RootApp() {
    return (
      <CacheProvider value={customMuiCache}>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <App />
        </ThemeProvider>
      </CacheProvider>
    );
  }
  
  export default RootApp;
  

配置完成后，当前应用所有sx生成的类名、MUI组件原生类名都会带上自定义前缀，彻底解决同页面多MUI应用、模块联邦场景下的类名冲突问题。

冲突场景示例截图：

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