直接用.el-select__input等类名会失效，因el-select下拉面板通过el-popper挂载到body下，脱离组件作用域，导致:deep()无法选中；须提级至全局样式或配合teleport强制挂载到组件内。
直接用.el-select__input这类类名会失效？因为Popper挂载在body下
Element Plus的el-select、el-date-picker等组件，下拉面板默认通过el-popper渲染到底部，不跟随组件DOM嵌套。你在组件内部写的:deep(.el-select__popper)根本选不到——它压根不在当前组件作用域内。
常见错误现象：样式在开发时看似生效，打包后消失；或只在首次打开下拉时有效，二次打开就回退。
- 必须把下拉相关的CSS提级到全局样式文件（如
src/styles/element-override.css），或用<style></style>标签加scoped属性外的全局写法 - 若坚持局部作用，可用
teleport配合to属性将Popper强制挂载到组件容器内，再用:deep()穿透 - 注意
el-popper类名在2.11+版本中已逐步被el-tooltip__popper等更细粒度类替代，查DOM结构比死记类名更可靠
:deep()穿透失效？检查是否用了lang="scss"但没配@use
Vue单文件组件里:deep()在lang="scss"下行为异常很常见——SCSS模块化后，:deep()无法穿透@use导入的变量作用域，导致编译时类名被忽略或重命名。
典型表现：:deep(.el-input__inner)在CSS里能生效，换成SCSS后完全不生效，控制台也无报错。
- 方案一：改用
lang="css"写局部覆盖样式，绕过SCSS模块问题 - 方案二：保持SCSS，但放弃
:deep()，改用全局选择器+高特异性，例如.my-form :is(.el-input) .el-input__inner - 方案三：升级到Vite 5+ + Element Plus 2.11+，启用
defineExpose配合provide/inject传样式类名，从逻辑层控制而非纯CSS
禁用状态文字颜色不一致？别碰color，盯住-webkit-text-fill-color
el-input、el-select、el-textarea在:disabled状态下，表面看都用了color，实际渲染依赖-webkit-text-fill-color。这个私有属性优先级高于color，且各组件实现不统一——el-input显式设置了它，el-select没设，导致禁用文字颜色不一致。
- 统一方案：在全局样式中强制覆盖
-webkit-text-fill-color，例如.el-input.is-disabled .el-input__inner, .el-select.is-disabled .el-input__inner, .el-textarea.is-disabled .el-textarea__inner { -webkit-text-fill-color: #999 !important; } - 不要加
!important？那得确保你的样式表加载顺序在Element Plus CSS之后，且没有其他插件注入更高优先级规则 - 兼容性注意：Firefox不支持该属性，需额外补
color作为降级，但现代项目基本可忽略
想批量改主题色？别用CSS选择器硬覆盖，走SCSS变量注入
靠.el-button--primary { background: orange; }这种写法改主题，会漏掉el-tag--success、el-progress-bar__inner等几十个隐式依赖$--color-primary的组件内部结构，维护成本爆炸。
真正可持续的方式是接管Element Plus的SCSS变量体系：
- 新建
src/styles/element-variables.scss，用@forward "element-plus/theme-chalk/src/common/var.scss" with (...)覆盖基础色值 - 确保这个文件在
main.ts中引入的位置早于element-plus/theme-chalk/src/index.scss - 如果项目用Vite，推荐搭配
unplugin-element-plus插件，它能自动处理@use路径和变量注入时机
硬写CSS选择器改样式，短期快，长期疼。Element Plus的BEM结构本就为变量驱动而生，绕开它等于放弃框架设计红利。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
