MUI V5 全局主题覆盖修改输入框圆角不生效问题排查

问题核心原因 #

• 你观察到的类名差异不影响样式生效：沙箱默认启用生产环境类名哈希配置，因此不显示MuiOutlinedInput-root这类语义化全局类名；本地项目是开发环境，默认保留全局类名方便调试，二者运行时逻辑没有本质区别。
• 样式不生效的核心原因有两个：
  1. 本地项目存在MUI样式注入顺序错误，组件默认样式后于自定义主题样式注入，优先级更高，直接覆盖了你配置的圆角属性。
  2. 你当前的主题配置写法存在版本兼容问题：MuiOutlinedInput的可见边框实际渲染在notchedOutline子元素上，部分v5小版本下仅给root设置圆角，会被子元素的直角边框遮挡，无法显示圆角效果。

修复步骤 #

• 首先修正主题配置，同时覆盖根节点和边框节点的圆角属性，兼容所有MUI v5版本：

const theme = createTheme({
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          borderRadius: 16,
          "& .MuiOutlinedInput-notchedOutline": {
            borderRadius: 16
          }
        },
      }
    }
  }
})

• 修正样式注入顺序：在应用根组件外层包裹StyledEngineProvider并开启injectFirst属性，强制MUI默认样式最先注入，确保自定义主题样式优先级高于默认样式：

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

// 根节点渲染逻辑
ReactDOM.createRoot(document.getElementById('root')).render(
  <StyledEngineProvider injectFirst>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </StyledEngineProvider>
);

• 排查依赖冲突：执行包管理命令检查@mui/material是否存在多版本共存问题：
  • npm用户执行：npm ls @mui/material
  • yarn用户执行：yarn list --pattern @mui/material
  • pnpm用户执行：pnpm ls @mui/material
    如果存在多个版本，将所有MUI相关依赖（@mui/material、@mui/system、@mui/base、@emotion/react、@emotion/styled）版本统一对齐后重新安装依赖，多版本共存会导致主题上下文无法匹配，自定义配置完全不生效。
• 排查第三方样式冲突：打开浏览器开发者工具选中输入框根节点，在样式面板中查找覆盖border-radius属性的规则，常见冲突来源包括全局CSS重置代码、Tailwind预置样式、其他UI组件库的全局输入框样式，对应提升自定义样式优先级即可。

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