MUI v5样式覆盖应优先使用components配置全局统一调整或sx属性做局部动态覆盖；直接写CSS类名、内联style、!important或全局CSS易失效且破坏主题系统。
直接写 CSS 类名或内联 style 大概率失效——MUI v5 默认用 @emotion/styled 注入样式，优先级高于普通 class 和内联 style。
用 components 配置统一覆盖组件根样式
这是最稳定、可维护性最强的方式，适用于全局统一调整（比如所有 Button 圆角、所有 TextField 边框）。MUI 不渲染你写的 MuiTextField 样式，因为视觉边框实际由 MuiOutlinedInput 控制。
-
createTheme的components字段只认官方组件名，如MuiButton、MuiOutlinedInput，不能写MuiTextField - 覆盖
TextField的边框要改MuiOutlinedInput的notchedOutline或root，例如：components: { MuiOutlinedInput: { styleOverrides: { notchedOutline: { borderColor: '#999' }, root: { borderRadius: 0 } } } } -
styleOverrides内函数接收{ ownerState, theme }，可条件化处理：root: ({ ownerState }) => ownerState.size === 'small' ? { fontSize: '0.75rem' } : {}
用 sx 属性做局部、动态样式覆盖
sx 不慢，但写法不对就会触发高频重渲染。它适合单次、条件化、响应式样式，不适合重复创建对象。
- 禁止写
sx={{ padding: theme => theme.spacing(2) }}——改用sx={{ p: 2 }}，缩写已预计算 - 避免在 render 中定义新对象：
const style = { bgcolor: 'red' }; return <box sx="{style}"></box>——每次引用不同，强制重绘 - 响应式必须扁平：
sx={{ display: { xs: 'none', md: 'block' } }}，别写sx={{ display: (theme) => ({ xs: 'none' }) }} - 真需要动态计算？用
useMemo缓存：const sxProps = useMemo(() => ({ bgcolor: variant === 'error' ? 'error.main' : 'primary.light', p: size === 'sm' ? 1 : 2 }), [variant, size])
为什么 !important 和全局 CSS 文件不是好选择
它们能“生效”，但破坏 MUI 主题系统的设计契约，导致后续升级困难、主题切换失效、TypeScript 类型丢失。
立即学习“前端免费学习笔记（深入）”；
- 全局 CSS（如
src/assets/css/global.css）无法访问theme变量，也不能响应暗色模式切换 -
!important会绕过 MUI 的样式优先级机制，在 v5+ 中可能被 emotion 的插入顺序覆盖，尤其在 SSR 场景下行为不一致 - 用
/deep/或::ng-deep是 Vue/Angular 的写法，React + MUI 不适用 - 直接操作 DOM 或用
ref.current.style修改，会和 MUI 的样式注入冲突，且无法参与主题响应
真正容易被忽略的点是：MUI 的样式覆盖不是“谁写在后面谁赢”，而是“谁更靠近组件实例、谁更符合 slot 结构、谁被 theme 正确识别”。components 配置和 sx 是两条正交路径——前者管全局一致性，后者管局部灵活性，混用或错用 slot 名（比如想改 TextField 却去动 MuiTextField）是最多见的卡点。
