迁移至MUI5后无法直接使用MUI类，emotion CSS逻辑异常求助

核心原因 #

MUI5采用CSS-in-JS的样式注入机制，与MUI4的全局类名加载逻辑不同：如果未正确触发SvgIcon组件样式的注入，直接添加MuiSvgIcon-root类名不会生效；另外在emotion中引用全局类名需要显式声明。

具体解决方法 #

1. 复用SvgIcon组件的内置样式（推荐） #

如果你的自定义图标需要复用MuiSvgIcon-root的样式，直接基于SvgIcon组件封装，它会自动携带该类名及对应样式：

import SvgIcon from '@mui/material/SvgIcon';

const CustomStepIcon = ({ children }) => {
  return (
    <SvgIcon>
      {/* 自定义图标内容，自动继承MuiSvgIcon-root的样式 */}
      {children}
    </SvgIcon>
  );
};

2. 手动使用全局类名并确保样式注入 #

如果必须手动给元素添加MuiSvgIcon-root类名，需要确保SvgIcon的样式被项目加载：

• 确保你的项目中已经通过ThemeProvider配置了MUI主题（这是MUI5的基础要求）
• 在自定义元素上直接添加类名：

const CustomStepIcon = () => {
  return (
    <svg className="MuiSvgIcon-root" viewBox="0 0 24 24">
      {/* 图标内容 */}
    </svg>
  );
};

注：如果样式仍未生效，可在项目入口处手动导入SvgIcon的样式：import '@mui/material/SvgIcon';

3. 在emotion样式中引用全局类名 #

如果是在emotion的css函数中需要引用MuiSvgIcon-root，必须用:global()包裹全局类名，避免emotion对其进行哈希处理：

import { css } from '@emotion/react';

const containerStyle = css`
  .some-local-class :global(.MuiSvgIcon-root) {
    // 这里可正常引用该类的样式，不会覆盖原有样式
  }
`;

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