!important 失效主因是优先级被内联样式或 shadow dom 隔离：内联样式高于 !important，shadow dom 需用 ::part() 或 :host 覆盖；第三方组件哈希类名需用属性选择器或官方 theme api；css 加载顺序错位、css modules 作用域限制也导致失效。
为什么 !important 不起作用？优先级被第三方组件的内联样式或 Shadow DOM 拦住了
第三方 CSS 组件（比如 Ant Design、Element Plus）常通过 JS 动态注入样式，或直接写 style 属性到元素上，甚至用 Shadow DOM 封装。这时候你写的 .btn { color: red !important } 很可能根本没机会生效——不是语法错，是压根没进渲染树的样式计算链。
- 检查是否触发了 Shadow DOM：用 DevTools 点开元素，看有没有
#shadow-root节点；有就说明普通 CSS 选不到里面的内容，得用::part()或::theme()（如果组件支持），或改用:host在自定义元素内部覆盖 - 内联样式优先级高于所有外部 CSS，包括
!important；必须用 JS 动态改element.style.color = 'red'，或用setAttribute('style', 'color: red !important') - 某些 UI 库（如 MUI）会把 class 名哈希化（
css-1a2b3c），你写的原始类名匹配不到；得用属性选择器[class*="button"]或找库提供的主题覆盖 API（如createTheme）
如何安全地覆盖 Ant Design 的 Button 样式而不被后续版本破坏
Ant Design 默认用 CSS-in-JS（emotion）注入样式，class 名带哈希，且组件更新后哈希会变。硬写 .ant-btn-primary 看似有效，但升级后可能失效，或和暗黑模式等新特性冲突。
- 优先用官方推荐的
theme配置：在ConfigProvider中传入theme={{ components: { Button: { colorPrimary: '#1890ff' } } }}，这是最稳定的方式 - 若需更细粒度控制，用
cssprop（emotion）或styled包裹组件：const StyledButton = styled(Button)`font-size: ${props => props.$large ? '18px' : '14px'};` - 避免用全局
.ant-btn+ 后代选择器强行覆盖，容易误伤其他地方；改用[data-testid="my-special-button"] .ant-btn这类带明确语义的定位方式
Webpack / Vite 项目中 CSS 加载顺序导致覆盖失败的排查路径
CSS 生效顺序 = 引入顺序 = 打包后 <link> 标签顺序。第三方组件样式如果在你自己的 CSS 之后加载，你的规则就会被覆盖——哪怕你写了 !important，也架不住它在后面。
- Vite 项目：检查
main.tsx中是否先import 'antd/dist/reset.css'再import './index.css'；顺序反了就得调换 - Webpack 项目：确认
style-loader和css-loader的insert选项没强制插到 head 开头；默认是 append，但有些插件（如 mini-css-extract-plugin）会改变行为 - 在 HTML 中手动调整
<link>顺序只是临时验证手段，不能作为线上方案；真正要 fix，得统一入口文件的 import 顺序，或用import 'xxx.css' assert { type: 'css' }（现代浏览器支持）显式声明依赖
使用 CSS Modules 时怎么让第三方组件样式「透传」进来
CSS Modules 默认局部作用域，className={styles.btn} 编译后变成 Button_module__btn__abc123，但第三方组件不认这个 class，也不会自动帮你绑定。想让它响应你的样式，得主动「破局」。
立即学习“前端免费学习笔记（深入）”；
- 用
:global(.ant-btn)包裹需要穿透的规则：:global(.ant-btn) { border-radius: 4px !important; }；注意:global是全局污染，只在必要处用 - 配合
composes复用第三方 class：.my-button { composes: ant-btn from 'antd/lib/button/style/index.css'; }，但要求目标 CSS 文件是可导入的（通常需配别名或开启css.modules.exportLocalsConvention） - 更稳妥的做法：放弃直接覆盖，用
wrap模式 —— 把第三方组件包进你自己的div，用子选择器控制内部（如.my-wrapper .ant-btn），再靠父容器 class 控制作用域
真正麻烦的从来不是怎么加样式，而是搞清样式到底在哪一层被拦截、被重写、被隔离。Shadow DOM、CSS-in-JS、构建时哈希、模块化作用域……每层都可能吃掉你的 !important。盯住 DevTools 的 Computed Styles 面板，看那条被划掉的规则是从哪个文件来的，比背口诀管用。
