直接写 .el-button 无效是因为 Element Plus 组件样式默认 scoped，生成如 .el-button[data-v-xxxxx] 的高权重选择器，普通选择器无法匹配；应使用 :deep() 穿透或 CSS 自定义变量安全覆盖。
为什么直接写 .el-button 无效？
Element Plus 的组件样式默认带了 scoped（通过 vue-loader 注入的属性选择器），比如 .el-button[data-v-xxxxx]，你写的普通 .el-button 选择器权重不够，根本匹配不上。
常见错误现象：样式写了但完全不生效，开发者工具里能看到你的 CSS 被加载了，但被划掉；或者只在部分页面生效（比如只在非 scoped 的单文件组件里起作用）。
- 不要指望全局覆盖靠加
!important解决——它可能临时起效，但会污染后续升级、破坏 BEM 结构、让团队协作变混乱 - 优先用
:deep()（Vue 3 +setup语法糖下推荐）或>>>（旧写法，兼容性更好）穿透 scoped 样式 - 如果要改大量组件的默认行为（比如统一圆角、字体大小），建议在项目入口处导入自定义主题 CSS，并确保它在
element-plus/dist/index.css之后加载
el-button 的颜色和边框怎么安全重写？
直接覆盖 .el-button--primary 可能被内部动态 class 冲突（比如 is-disabled、is-loading 状态叠加时）；更稳妥的方式是利用 Element Plus 提供的 CSS 自定义属性（CSS variables）。
它从 v2.3.0+ 开始支持一套可配置的 design token，比如：
立即学习“前端免费学习笔记（深入）”；
:root {
--el-color-primary: #409eff;
--el-border-radius-base: 4px;
--el-font-size-base: 14px;
}
这些变量会影响所有使用它们的组件，包括 el-button、el-input、el-select 等。只要你在 main.ts 或全局样式入口中提前注入，就能批量生效。
- 修改
--el-color-primary后，el-button的主色、el-checkbox的勾选色、el-switch的激活色都会同步变化 - 避免直接写
.el-button { background: red !important }—— 这种硬覆盖会让is-disabled状态下的背景色失效 - 若需局部覆盖（如某个页面按钮风格不同），用
:deep(.el-button)+ 更具体的选择器，例如:deep(.el-button--primary):not(.is-disabled)
如何让 el-table 的表头文字居中且加粗？
表头单元格（.el-table__header th）默认是左对齐、常规字重；但它的样式被多层嵌套包裹，且含内联 style（比如固定列会加 position: sticky），直接写 th { text-align: center; font-weight: bold; } 很容易被忽略。
正确做法是提高选择器 specificity，同时注意作用域：
- 在 scoped 组件里，用
:deep(.el-table__header th)，并加上!important（此处合理，因为原始样式来自 inline 或高权重 selector） - 如果整个项目都要改，建议在全局 CSS 中写：
.el-table__header th .cell { text-align: center; font-weight: bold; }—— 注意目标是.cell子元素，不是th本身 - 避免用
th > div这类过于宽泛的选择器，容易误伤其他组件（比如 el-select 下拉里的 div）
覆盖后出现主题切换失效或暗色模式异常？
Element Plus 的暗色模式依赖 CSS 变量 + class="dark" 切换，如果你用静态值覆盖了颜色（比如写死 color: #333），那切换到暗色模式时这部分样式就不会响应变化。
真正可维护的做法是复用它的变量体系：
- 检查你是否覆盖了
--el-text-color-primary、--el-bg-color等基础变量，而不是直接写死颜色值 - 暗色模式下，Element Plus 会把
:root改为.dark :root并重置变量值；所以你的自定义变量也要在.dark下重新声明 - 如果用了插件如
unocss或windi，注意它们可能提前提取了静态颜色，绕过变量机制 —— 此时需禁用相关 color 提取规则
复杂点在于：变量覆盖必须发生在 Element Plus 的变量定义之后，且不能被构建工具（如 Vite 的 CSS 预处理顺序）意外截断。最容易被忽略的是，Vite 默认按 import 顺序解析 CSS，import 'element-plus/dist/index.css' 必须在你自定义变量的 import './styles/variables.css' 之前。
