CSS选择器失效主因是样式加载顺序、选择器特异性冲突及CSS Modules作用域限制：组件库样式若先加载或选择器更具体（如.ant-btn-primary.ant-btn），会覆盖单类名规则；CSS Modules中未用:global()包裹的.ant-btn不会生效；!important在组件库自身也使用时仍可能失效。
因为组件库的样式文件加载顺序、选择器特异性（specificity）和 CSS Modules 的局部作用域机制，共同导致你写的 CSS 选择器在浏览器里“没生效”——不是它没被解析，而是它被更高优先级的规则压住了。
为什么 .ant-btn 写了却不起作用？
最常见的情况：你在自己的 Button.css 里写了：
.ant-btn {
background-color: red;
}
但按钮还是蓝色。原因有三：
- 组件库（比如 Ant Design）的 CSS 是通过
import 'antd/dist/reset.css'或类似方式引入的，而你的 CSS 文件可能被 webpack 打包到了它前面 —— 浏览器按顺序解析，后出现的同级选择器才赢； -
.ant-btn在组件库源码里往往嵌套在更具体的选择器中，比如.ant-btn-primary.ant-btn，它的特异性比单个类名高，自然胜出； - 如果你用的是 CSS Modules（
Button.module.css），那.ant-btn根本不会被编译进最终 class 名里，它被当成普通字符串丢掉了，压根没进 DOM。
为什么加了 !important 有时还无效？
加 !important 确实能提高权重，但它不是万能的：
Orderly Sdk React Hooks
下载
Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。
立即学习“前端免费学习笔记（深入）”；
- 如果组件库自己也用了
!important（比如某些内联 style 或第三方封装层），你的声明仍可能被覆盖； - React Native 不支持
!important，写上去直接忽略； - 在 CSS Modules +
:global()混用时，:global(.ant-btn) { ... !important }才真正生效，光写.ant-btn { ... !important }可能因模块化被重命名而失效； - 某些 UI 库（如 MUI）用 JSS 或 emotion 动态注入样式，它们的运行时优先级可能高于你静态写的 CSS。
怎么让自定义样式稳定赢过组件库？
不靠猜，靠控制三个变量：顺序、特异性和作用域。
- 确保你的 CSS 文件 import 在组件库之后，例如：
import 'antd/dist/reset.css'; import './MyButton.css';； - 提升选择器特异性：不用
.ant-btn，改用div .ant-btn或.my-wrapper .ant-btn，哪怕多包一层父容器也值得； - 避开 CSS Modules 对第三方类名的干扰：把覆盖逻辑写在非
.module.css文件里，或明确用:global(.ant-btn)声明； - 终极兜底（慎用）：用内联 style 覆盖可继承属性（如
style={{ backgroundColor: 'red' }}），但无法覆盖伪元素（::before）、子组件内部样式等。
真正容易被忽略的点是：你以为在改组件样式，其实是在和构建工具链、CSS 注入时机、以及组件库自身的样式组织方式博弈。一次生效，不代表换了个打包配置或升级了组件库版本还能生效。
