如何通过浏览器开发者工具查看Material UI v5中组件props对应的生效样式类名

该问题是Material UI v5默认切换为Emotion作为样式引擎导致的：v5默认关闭了v4版本自带的语义化全局类名（比如.MuiButton-contained）输出，因此无法直接在DOM的class属性中看到对应类名。

无代码改动临时查看方法 #

如果你只是临时需要查询对应类名，不需要修改项目配置，可以按以下步骤操作：

• 确保你的浏览器已经安装了React DevTools插件
• 打开浏览器开发者工具的「组件」面板，选中你要查看的MUI组件
• 在右侧属性栏找到classes字段，展开后即可看到所有props对应的语义化类名，比如variant="contained"对应的类名会直接展示在该对象中

永久开启稳定语义化类名方案 #

如果需要和v4一样直接在开发者工具的元素面板看到类名，可以修改项目配置开启类名输出：

1. 在项目入口文件（比如index.js/main.tsx）的最顶部，所有MUI组件导入之前，添加以下配置：

import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';

// 保持和v4一致的类名前缀
ClassNameGenerator.configure((componentName) => `Mui${componentName}`);

2. 如果你的项目使用了MUI的CSS变量方案，还需要在主题配置中添加类名生成规则：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  cssVariables: {
    // 保留语义化类名
    generateClassName: (rule, styleSheet) => `${styleSheet?.options?.classNamePrefix ?? 'Mui'}-${rule.key}`,
  }
});

// 正常使用ThemeProvider包裹根组件即可

配置完成后重启项目，就能在开发者工具元素面板看到和v4完全一致的.Mui[组件名]-[属性值]格式的类名，可以直接用这些类名覆写组件样式。

生产环境保留稳定类名配置 #

如果需要在生产构建产物中也保留语义化类名，需要修改babel配置，关闭Emotion的类名压缩：

// babel.config.json 或 .babelrc
{
  "plugins": [
    [
      "@emotion/babel-plugin",
      {
        "autoLabel": "always",
        "labelFormat": "[local]",
        "cssPropOptimization": true
      }
    ]
  ]
}

内容的提问来源于stack exchange，提问作者Arrofi Reza Satria