加 !important 未生效主因是库内更具体选择器权重更高，需用开发者工具定位冲突规则，复刻库选择器结构再叠加自定义类，避免滥用 !important。
为什么加 !important 还是没生效
核心原因是 CSS 优先级计算中，类选择器的权重（0,1,0）可能被库内更具体的规则压倒，比如 .lib-component .item.active 对比你的 .my-button。光靠 !important 治标不治本，还容易引发后续维护冲突。
- 先用浏览器开发者工具检查「Computed」面板，看哪条样式被划掉、被哪条覆盖，定位真实冲突规则
- 优先复刻库内选择器结构再叠加自定义类，例如库用
.ui-button--primary，你就写.ui-button--primary.my-theme - 避免无差别用
!important，只在必须打破内联样式或高权重第三方规则时谨慎使用
引入顺序对了，但样式仍被重置
很多 UI 库（如 Ant Design、Element Plus）会在组件挂载后动态注入 CSS，或者通过 CSS-in-JS 方式生成带哈希的类名，导致你写的外部 CSS 文件虽后加载，却因作用域隔离或注入时机晚而失效。
- 确认库是否启用 CSS Scope（Vue 的
<style scoped></style>）或 Shadow DOM；若是，普通外部 CSS 无法穿透 - 改用库提供的主题定制机制，比如 Ant Design 的
modifyVars或 MUI 的createTheme - 如必须硬覆盖，在 HTML 中把自定义 CSS 放在
最底部，并加data-override标记便于调试
如何安全地只覆盖某个组件的某部分样式
目标不是“全盘推翻”，而是精准干预。盲目写全局选择器（如 button、.icon）极易误伤其他组件，尤其当多个库共存时。
- 利用库自身提供的命名空间前缀，比如 Bootstrap 5 是
.btn，Headless UI 是.group/.peer，优先基于这些写组合选择器 - 给容器加唯一 ID 或 data 属性，例如
<div id="my-app">...</div>，然后写#my-app .lib-dialog .close-button - 用属性选择器限定版本，如
[data-lib-version="2.4.1"] .tooltip，避免升级后意外失效
PostCSS 或构建工具导致覆写文件未生效
Webpack/Vite 的 CSS 提取插件（如 mini-css-extract-plugin）可能把库样式和你的样式分到不同 chunk，造成加载顺序不可控；或者 PostCSS 自动加了前缀/压缩，让选择器行为偏离预期。
立即学习“前端免费学习笔记（深入）”；
- 在构建配置中显式指定 CSS 入口顺序：确保自定义 CSS 是最后一个
import或require，且不被 splitChunks 拆走 - 关闭 CSS 压缩中的
discardDuplicates（如 cssnano），防止它把看似重复实则意图不同的规则删掉 - 开发时临时禁用所有 PostCSS 插件，验证是否为工具链干扰；是的话，调整插件执行顺序或加
/* purgecss ignore */注释
真正难的不是写得出来，而是判断该不该覆盖、在哪一层覆盖——是改 CSS，还是换主题 API，或是提 PR 给库本身加 className 支持。别一上来就抄选择器，先看文档里有没有 classNamePrefix 或 styleOverrides 这种开关。
