根本原因是CSS层叠规则严格执行：加载顺序、选择器权重、伪类触发时机共同作用；.btn.my-btn可能被button.btn.btn-primary（0,2,1）等更高特异性选择器压制，需用带标签或属性的选择器提升权重，并确保自定义CSS在Bootstrap之后加载。
Bootstrap 5 的自定义样式被覆盖，根本不是你写错了，而是 CSS 层叠规则在严格执行——加载顺序、选择器权重、伪类触发时机三者共同作用的结果。直接改 !important 能临时生效，但下次升级或加个新组件就可能崩。
为什么 .btn.my-btn 还是赢不过 Bootstrap 默认样式
Bootstrap 5 大量使用多类组合选择器，比如 .btn.btn-primary（特异性 0,2,0），而你只写 .my-btn（0,1,0）或甚至 .btn.my-btn（0,2,0）——看起来一样，但实际可能被更具体的选择器压制，例如 button.btn.btn-primary（0,2,1）或 .navbar .btn（0,2,0，但因父级限定而生效）。
- 打开 DevTools 的 “Computed” 面板，点开被划掉的
border-radius或color，看右侧来源行末尾是否标着specificity: 0,2,0 - 不要只靠“类名多”，要带标签或属性：用
button.my-btn、input[type="search"].search-rounded、.form-control[data-custom="search"] - 避免用通用容器类（如
.container）做前缀，它可能被多次复用，导致意外提权或污染
为什么本地开发时样式正常，打包后反而失效
这通常不是代码问题，而是 CRA 开发服务器（webpack-dev-server）对 CSS 加载时机的处理和生产构建不一致：开发时热更新可能让自定义 CSS 先解析完，而 Bootstrap 的 CDN 或 import 'bootstrap/dist/css/bootstrap.min.css' 因网络延迟或 HMR 重载顺序错位，后加载却“反杀”了你的样式。
- 检查
public/index.html中 CSS 引入顺序：确保自定义 CSS 的<link>在 Bootstrap 的<link>之后 - 如果用 JS 导入（如
import './index.css'），确认它写在import 'bootstrap/dist/css/bootstrap.min.css'之后，且不在任何条件分支里 - 禁用浏览器缓存重试（Ctrl+Shift+R），排除 CDN 资源加载竞态
为什么加了 !important 还是没变色、没圆角
说明你覆盖的目标元素根本没匹配到——比如想改禁用按钮颜色，却只写了 button:disabled，但实际 DOM 是 <input type="button">；或者想调搜索框圆角，却给 input-group-text 加了 border-radius，而真正需要的是 .input-group > .form-control。
立即学习“前端免费学习笔记（深入）”；
- 禁用状态必须按控件类型分别处理：
button:disabled、input:disabled、select:disabled、fieldset[disabled] input互不继承 - 圆角失效常因
input-group内部顺序错乱：.input-group > :first-child和.input-group > :last-child才有圆角，中间的.form-control默认被清空——要么调整 HTML 顺序，要么手动补border-radius: 0.375rem -
:invalid、:focus-visible等伪类不触发？检查表单是否加了novalidate，以及 JS 是否调用了reportValidity()或设置了setCustomValidity('')
最易被忽略的一点：Bootstrap 5 的样式逻辑已深度绑定原生语义（如 disabled 属性、:invalid 伪类、flex 布局默认值），用 class 模拟禁用、用 JS 改 style.opacity、或沿用 v4 的 .form-group 结构，都会导致样式“看似写了，实则没走通”。
