MUI v5 如何为styled生成的类名自动添加组件名标识？

方案1：使用MUI官方Babel插件自动生成label（推荐） #

这是成本最低的实现方式，插件会在编译阶段自动提取styled组件的变量名作为label属性，无需手动编写。

• 第一步：安装开发依赖
  npm install @mui/babel-plugin --save-dev
• 第二步：修改Babel配置
  在你的项目Babel配置文件（.babelrc、babel.config.json 或 babel.config.js）中新增插件配置：

{
  "plugins": [
    ["@mui/babel-plugin", {
      "styledComponents": true
    }]
  ]
}

配置完成后，你原本的写法const TitleWrapper = styled('div')...会在编译时自动注入{ label: 'TitleWrapper' }参数，生成的类名会自动带上对应组件名前缀，和手动添加label的效果完全一致。

方案2：封装自定义styled工具（适配无需Babel插件的场景） #

如果你不想引入额外的编译插件，可以自行封装一层styled方法，减少重复配置的成本：

import { styled as muiStyled } from '@mui/material/styles';

export const styled = (component, options = {}) => {
  return (styles) => {
    const StyledComponent = muiStyled(component, options)(styles);
    // 自动同步label到组件displayName，方便React DevTools识别
    if (options.label) {
      StyledComponent.displayName = `Styled(${options.label})`;
    }
    return StyledComponent;
  };
};

后续项目中统一引用这个封装后的styled方法即可，运行时不会额外增加性能开销。

• 两类方案默认都仅在开发环境生效，生产构建时会自动剔除label相关配置，不会增加打包体积，也不会泄露内部组件命名信息。
• 若使用Vite作为构建工具，可使用对应Vite生态的MUI插件实现相同效果，配置逻辑与Babel插件一致。

内容的提问来源于stack exchange，提问作者Luiz Felipe Felicio