MUI v5中能否从指定根容器生成样式？

默认情况下，MUI生成的样式是不带容器前缀的：

.css-15xpdk1 {
  display: flex;
  ...
}

我希望MUI生成的样式能带上指定根容器的选择器前缀，变成这种格式：

#some-root-container .css-15xpdk1 {
  display: flex;
  ...
}

当然可行，给你两种靠谱的实现方式：

• 自定义类名生成函数（从源头控制）
  用MUI提供的createGenerateClassName改写类名生成规则，让每个生成的类名自动带上根容器前缀：

  import { createGenerateClassName, ThemeProvider, createTheme } from '@mui/material/styles';
  import { StyledEngineProvider } from '@mui/material/styles';
  
  // 创建默认的类名生成器
  const baseGenerateClassName = createGenerateClassName({
    productionPrefix: 'css',
  });
  
  // 自定义生成逻辑，给类名加上根容器前缀
  const customGenerateClassName = (componentName, styleSheet, options) => {
    const originalClassName = baseGenerateClassName(componentName, styleSheet, options);
    return `#some-root-container .${originalClassName}`;
  };
  
  const theme = createTheme();
  
  function App() {
    return (
      <StyledEngineProvider generateClassName={customGenerateClassName}>
        <ThemeProvider theme={theme}>
          {/* 这里放置你的MUI组件 */}
        </ThemeProvider>
      </StyledEngineProvider>
    );
  }
  

• 全局样式包裹法（灵活适配）
  如果你用的是Emotion或Styled Components，可以直接编写全局样式，把根容器下的MUI类名统一嵌套包裹：

  import { Global, css } from '@emotion/react';
  
  function App() {
    return (
      <>
        <Global
          styles={css`
            #some-root-container {
              .css-15xpdk1 {
                display: flex;
                ...
              }
              /* 其他需要加前缀的MUI类名都可以这么嵌套 */
            }
          `}
        />
        {/* 你的MUI组件 */}
      </>
    );
  }
  

第一种方法适合给所有MUI组件统一加前缀，第二种更适合针对性地给部分组件配置前缀。

内容的提问来源于stack exchange，提问作者Андрей Марющенко