直接写 .el-button { color: red } 会失效，因组件库启用 CSS 作用域隔离、加载顺序与权重冲突，且易引发样式打架；应使用 :deep() 穿透 scoped 样式或通过 CSS 变量统一接管主题。
为什么直接写 .el-button { color: red } 会失效或冲突
因为 Element Plus 等主流组件库默认启用 CSS 作用域隔离（通过类名哈希或 Shadow DOM），而你在全局 CSS 文件里写的 .el-button 会被 Vite 的构建流程识别为“无作用域规则”，但实际加载顺序、CSS 权重、以及组件内部 :deep() 或内联样式都可能覆盖它。更麻烦的是，这种写法一旦在多个地方重复出现，就会引发样式打架，且无法被 Tree-shaking 或按需加载机制感知。
用 :deep() 精准穿透 scoped 样式
这是 Vue 3 官方推荐的局部定制方式，只影响当前组件，不污染其他地方。关键点在于：必须配合 <style scoped> 使用，且选择器要写在 :deep() 内部。
-
:deep()只能用于单个组件的<style scoped>块中，不能放在全局样式文件里 - 写法示例：
<style scoped> .my-form :deep(.el-input__inner) { padding: 8px 12px; } </style> - 避免嵌套过深，比如
:deep(.el-select .el-input__inner)容易因组件内部结构变更而断掉 - 如果用了 Sass/Less，支持在
:deep()内继续嵌套，但注意编译后仍需保持语义清晰
用 CSS 变量接管主题源头，避免硬编码样式
Element Plus、Naive UI 等库都基于 CSS 自定义属性设计，改变量比改选择器更稳定、更可维护。你只需要在 :root 或特定 class 下重设变量，所有组件自动响应。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 确保
theme.css在组件库 CSS 之前加载，例如在main.ts中：import './assets/styles/theme.css'; import 'element-plus/dist/index.css'; - 暗色模式切换只需切 class：
document.documentElement.classList.toggle('dark');，再配合.dark :root { --el-color-primary: #91d5ff; } - 不要试图用
:deep()去覆盖图标尺寸或阴影——先查文档确认是否有对应变量，比如--el-input-icon-size、--el-box-shadow-light
构建时注入变量 or 运行时动态 setProperty？
静态主题用构建时注入（Vite 的 css.preprocessorOptions.scss.additionalData）更轻量；需要用户实时换肤，则必须走 JS 控制 document.documentElement.style.setProperty()。
立即学习“前端免费学习笔记（深入）”；
- Vite 配置里加
additionalData是为了在所有 SFC 的 SCSS 中直接用$primary-color，但它和 CSS 变量是两套体系，别混用 - 运行时调用
setProperty修改--el-color-primary时，注意触发时机：要在组件挂载后、且确保 CSS 已加载完毕，否则首次渲染可能取不到新值 - 如果组件内部用了
style="color: var(--el-color-primary)"，那 JS 修改变量就能立刻生效；但如果写了style="color: #409eff"这种硬编码，就完全绕过了变量体系
<el-dialog> 内部改 --el-color-primary，不会影响外部按钮；但如果你在 :root 改了，又没控制好加载顺序，Element Plus 的 CSS 可能还没解析完，导致初始渲染错乱。这类问题不会报错，只会“看起来不太对”。 
