根本原因是mui v5+样式注入机制将内置样式置于styleoverrides之前解析，且受emotion class生成顺序和选择器特异性影响；正确做法是用slot替代深层选择器、条件化提升特异性，避免!important和外部css。
为什么 createTheme 里写的样式被 MUI 内部规则盖掉？
根本原因不是你写错了，而是 MUI v5+ 的样式注入机制默认把组件的「内置样式」放在你自定义的 styleOverrides 之前解析。哪怕你在 createTheme 里写了 MuiButton: { styleOverrides: { root: { borderRadius: '8px' } } }，它生成的 CSS 类名仍可能被更具体的 selector（比如 .MuiButton-root.MuiButton-contained 带的内联计算值）压住。
- 别指望
styleOverrides能无条件覆盖——它只是“建议”，最终渲染时仍受 emotion 的 class 名生成顺序和 specificity 影响 - 检查开发者工具中该元素的
Computed面板，看生效的border-radius来自哪个 class；如果来自css-xxx这类 emotion 自动生成的类，说明你的 override 没打中实际渲染节点 - 正确做法是：用
slot替代深层选择器，例如覆盖按钮文字颜色应写sizeSmall: { color: 'red' }，而不是root: { '& .MuiButton-label': { color: 'red' } }
!important 在 styleOverrides 里有用吗？
有用，但危险。MUI 官方明确不推荐在 styleOverrides 中使用 !important，因为这会破坏 emotion 的样式隔离机制，且一旦多个组件都加了 !important，就变成谁后加载谁赢，调试成本陡增。
- 如果你真需要强制覆盖（比如第三方组件嵌套太深），只在必要字段上加，例如
borderRadius: '8px !important'，不要整块对象都加 - 更稳妥的方式是提升 specificity：用
components.MuiButton.styleOverrides.root+ownerState.variant === 'contained'做条件化返回，让生成的 class 名天然带更多上下文 - 注意：
!important对 CSS 变量（如var(--my-radius)）无效，变量本身不参与优先级计算
为什么全局 CSS 文件里的 .MuiButton-root 不生效？
因为 MUI v5 默认启用 CSS-in-JS（emotion），所有组件样式都在 JS 运行时注入，且 scope 隔离。你写的外部 CSS 文件即使路径正确、选择器匹配，也会因 specificity 不足或注入时机晚于 emotion 样式而被忽略。
- 浏览器开发者工具里能看到你的规则被划掉，且来源显示为
style.css，而生效的是css-123abc这类 emotion class - 绝对不要在外部 CSS 里写
.MuiButton-root—— 它不是稳定类名，每次构建可能变；MUI 官方文档明确要求通过theme.components或styled()修改 - 若必须用全局样式（比如重置某些基础间距），得用更高权重的选择器，例如
body .MuiButton-root或div[data-testid="app"] .MuiButton-root，但依然不保证长期可用
自定义主题变量（如 --my-color）为什么在 styleOverrides 里取不到？
因为 styleOverrides 函数接收的 theme 是 MUI 经过 deepmerge 后的标准 theme 对象，它只包含官方 schema 支持的字段（palette、spacing 等）。你往 createTheme 顶层加的变量（如 customColor: '#ff0000'）会被合并逻辑丢弃。
- 想安全扩展 theme，请用 TypeScript 模块增强：
declare module '@mui/material/styles' { interface Theme { customColor?: string; } } - 变量必须挂到已有命名空间下，例如
palette.custom = { main: '#ff6b6b' }，然后在styleOverrides中用theme.palette.custom.main - 直接写
var(--my-color)是 CSS 层行为，和 theme 对象无关；若要用 CSS 变量，得在:root或组件根节点上手动 set，不能依赖createTheme自动注入
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
