组件库升级后盒模型错乱，大概率是新版本修改box-sizing声明顺序、加!important或启用Shadow DOM；须用DevTools→Computed查实际值，重点盯表单控件、按钮及伪元素，若显示content-box即被覆盖，应通过命名空间隔离、精准类名覆盖（含::before/::after）并加!important修复。
组件库升级后盒模型错乱，大概率不是你改了什么，而是新版本悄悄改了 box-sizing 声明顺序、加了 !important，或开始用 Shadow DOM 隔离样式——必须提前防御，不能等崩了再救。
检查升级前后 box-sizing 的实际生效值
别猜，直接看 DevTools → Computed → box-sizing。重点盯三类节点：表单控件（.el-input__inner、.ant-input）、按钮（.ant-btn、.btn）、伪元素（::before、::after）。如果显示 content-box，说明你的全局规则被覆盖或未命中。
- 打开浏览器的「Styles」面板，点开对应元素的 CSS 规则，看哪条声明被划掉（strikethrough）——那是被更高权重覆盖了
- 注意组件库是否在 CSS 文件开头加了
* { box-sizing: content-box !important; }（某些 v5 升 v6 的 Ant Design 预构建包干过这事） - 若用 Vite 或 Webpack，检查构建产物里是否重复引入了 normalize.css 和组件库自带的 reset 片段
用命名空间隔离，而不是硬刷全局
升级前就该把自定义样式和第三方样式隔开，避免“一升全崩”。不要依赖 * { box-sizing: border-box; } 一把梭，它在组件库加载后基本失效。
- 给业务容器加统一 class，比如
<div class="app-layout">...</div> - 写隔离规则：
.app-layout *, .app-layout *::before, .app-layout *::after { box-sizing: border-box; }，放在所有第三方 CSS 之前 - 对组件库专属区域反向处理，比如
.ant-design-legacy * { box-sizing: content-box !important; }（仅当必须兼容旧逻辑时）
精准覆盖组件库的关键类名和伪元素
组件库不会主动继承你的通配符，但会暴露明确类名。升级后第一件事是查文档或源码，找它们渲染输入框、下拉、弹窗的最内层节点。
立即学习“前端免费学习笔记（深入）”；
- Element Plus：
.el-input__inner, .el-select__input, .el-date-editor .el-input__inner - Ant Design：
.ant-input, .ant-btn, .ant-select-selection-item - 务必带上伪元素：
.el-input::before, .ant-btn::after——很多图标和状态装饰靠这个实现 - 加
!important是现实妥协，但只加在具体类名上，不加在*上
警惕 Shadow DOM 和 CSS-in-JS 的穿透失效
新版组件库（如 Lit、Stencil 构建的）越来越多用 Shadow DOM，默认外部样式完全无效。CSS-in-JS（如 Emotion、Styled Components）也可能把 box-sizing 注入到局部 scope 里，绕过你的全局规则。
- 检查元素是否在
#shadow-root下——是的话，外部* { box-sizing: ... }无效，只能用:host或::part()（需组件支持） - 若用 CSS-in-JS，确保主题注入层或全局
<style></style>标签里显式写了*, *::before, *::after { box-sizing: border-box; } - Safari 15+ 对
button的 UA 样式解析异常，哪怕在 Shadow DOM 外也得单独写button { box-sizing: border-box; }
真正难防的不是升级本身，而是组件库文档里没写的隐式变更：比如某次 patch 版本悄悄把 .ant-modal-body 的 padding 改成 em 单位，又没同步更新 box-sizing，结果在高缩放屏上多出半像素误差——这种问题只能靠 CI 里跑视觉回归，不能只靠手调。
