直接覆盖框架CSS类名不可靠但最常用；应优先使用框架自定义变量机制，必要时提高选择器权重或谨慎使用!important。
直接覆盖框架 CSS 类名是否可靠？
不可靠，但最常用。多数 CSS 框架（如 Bootstrap、Tailwind、Element Plus）的默认样式通过高优先级选择器（如 .btn.btn-primary、button[type="submit"]）或内联 !important 注入，直接写 .btn { color: red; } 很可能被忽略。
- 优先用框架提供的「自定义变量」机制（如 Bootstrap 的 Sass 变量、Tailwind 的
theme.extend） - 若必须覆盖，提高选择器权重：用
body .btn或加父容器类（如.my-app .btn） - 避免全局
!important，仅在极少数无法绕过时使用，且要加注释说明原因
Tailwind 中修改 button 默认颜色该动哪？
不能改 node_modules 里的源码，也不应直接写 .bg-blue-500 覆盖——这违背原子类设计初衷。正确路径是扩展主题配置。
module.exports = {
theme: {
extend: {
colors: {
primary: '#1a56db', // 替换原生 blue-500
'primary-hover': '#1e429f'
}
}
}
}
- 在
tailwind.config.js中扩展colors，而非重写整个colors对象 - 模板中继续用
bg-primary，保持语义清晰 - 若需不同尺寸/圆角等，同样通过
extend.spacing或extend.borderRadius控制
Bootstrap 5 使用 Sass 自定义主题时常见陷阱
直接改 $primary 变量后，部分组件（如 .btn-outline-primary）样式未同步更新，是因为它们依赖的是 color-contrast() 函数计算出的文本色，而非硬编码值。
- 必须在引入 Bootstrap 源文件前，先定义所有基础色变量：
$primary、$secondary、$gray等 - 调用
@import "bootstrap/scss/functions";后再定义衍生变量（如$primary-rgb），否则函数不可用 - 不要跳过
@import "bootstrap/scss/variables";—— 它包含大量逻辑判断，跳过会导致部分组件样式丢失
如何安全地为第三方组件库（如 Ant Design）注入定制样式？
Ant Design、Element Plus 等组件库默认使用 CSS-in-JS 或 scoped CSS，直接写全局 .ant-btn 可能无效，尤其在 Vue 的 <style scoped> 下。
立即学习“前端免费学习笔记（深入）”；
- Vue 项目中，在
<style>块外另起一个不带scoped的<style>，专门覆盖组件库类名 - React + Less 项目中，用
modifyVars配置 webpack 的less-loader，传入自定义变量对象 - 对动态生成的 class（如 AntD 的
ant-btn-ghost），检查其真实 DOM 结构，用更具体的选择器（如.my-form .ant-btn）提高优先级
真正难的不是改某一个按钮颜色，而是确保所有状态（hover / focus / disabled / loading）和所有组件变体（outline / ghost / link）都一致响应你的主题变更。漏掉一个，上线后就会在某个角落突然跳出原生蓝。
