目录
- 一、静态样式修改 - 使用 `::v-deep` 穿透组件样式
- 二、选择器的优先级和匹配顺序
- 三、动态添加样式 - 使用 Vue 实例属性（非推荐）
- 四、区别总结
- 五、应用场景总结
本文主要探讨在 Vue.js 项目中，特别是搭配 Element UI 或 Element Plus 组件库时，如何灵活处理 el-input 和 el-select 组件禁用状态下的字体颜色问题。我们将详细分析如何使用 CSS 选择器穿透（如 ::v-deep）来改变禁用状态下的输入框字体颜色，并探讨通过 JavaScript 动态添加样式的可能性及其局限性。
一、静态样式修改 - 使用 ::v-deep 穿透组件样式
在 Element UI 或 Element Plus 中，当我们给 el-input 或 el-select 添加 :disabled="true" 属性时，其字体颜色会变为暗色以表示禁用状态。
若要将禁用状态下的字体颜色更改为红色，可以通过 CSS 选择器穿透来实现：
/* Vue 2.x + Element UI */
.el-input.is-disabled /deep/ .el-input__inner,
.el-select.is-disabled /deep/ .el-input__inner {
color: red !important;
}
/* Vue 3.x + Element Plus */
.el-input.is-disabled ::v-deep .el-input__inner,
.el-select.is-disabled ::v-deep .el-input__inner {
color: red !important;
}
但这里，::v-deep 或 /deep/（Vue 2.x）选择器可以帮助我们穿透组件的作用域，修改内部 el-input__inner 元素的颜色。这只有 el-input 内部包裹的 el-input，其禁用状态的字体颜色能成功更改为红色，而 el-select 不行 。需要将::v-deep 或 /deep/提前。
/* Vue 2.x + Element UI */
/deep/ .el-input.is-disabled.el-input__inner,
.el-select.is-disabled /deep/ .el-input__inner {
color: red !important;
}
/* Vue 3.x + Element Plus */
::v-deep .el-input.is-disabled .el-input__inner,
.el-select.is-disabled ::v-deep .el-input__inner {
color: red !important;
}
二、选择器的优先级和匹配顺序
在 Vue SFC 的 scoped CSS 中，.el-input.is-disabled ::v-deep .el-input__inner 和 ::v-deep .el-input.is-disabled .el-input__inner 在意图上都是为了穿透组件样式作用域来修改内部元素 .el-input__inner 的样式，尤其是当 .el-input 处于禁用状态（.is-disabled 类名存在）时。
区别在于选择器的优先级和匹配顺序：
-
.el-input.is-disabled ::v-deep .el-input__inner：
这种写法先指定了.el-input.is-disabled这个类选择器，然后才使用::v-deep进行穿透。这意味着它首先会找到所有带有.el-input.is-disabled类的元素，然后再尝试穿透这些元素去影响内部.el-input__inner的样式。 -
::v-deep .el-input.is-disabled .el-input__inner：
这种写法先使用::v-deep进行穿透，然后指定了类选择器.el-input.is-disabled .el-input__inner。尽管两者最终都旨在达到相同的目的，但逻辑上这种写法似乎是试图穿透任意层次以查找满足.el-input.is-disabled .el-input__inner这一组合条件的所有元素。
三、动态添加样式 - 使用 Vue 实例属性（非推荐）
尽管 Vue 提供了多种方式动态添加样式，但直接通过 JavaScript 修改类似 ::v-deep 规则的样式并不推荐，尤其对于穿透子组件样式的情况。不过，这里仍提供一种使用 Vue 实例 $style 属性（仅限 Vue 2.x）的示例，以说明其工作原理：
// 在 Vue 组件中
export default {
data() {
return {
dynamicStyle: {}
};
},
created() {
this.updateDynamicStyle();
},
methods: {
updateDynamicStyle() {
// 创建模拟 CSS 样式对象（但这并不能应用于穿透子组件）
const styleObject = {
'.el-input.is-disabled .el-input__inner': {
color: 'red !important' // 注意这里没有使用 ::v-deep，因为 $style 不支持穿透
}
};
// 合并到组件的 $style 属性
this.dynamicStyle = Object.assign({}, this.dynamicStyle, styleObject);
}
}
};
然后在模板中引用：
<div :style="dynamicStyle">
<!-- el-input 和 el-select 等组件 -->
</div>
四、区别总结
::v-deep或/deep/选择器是在 CSS 中穿透组件作用域修改子组件样式的一种手段，特别适用于 Element UI 和 Element Plus 组件库。- 动态添加样式（如通过
$style）适用于在运行时调整组件实例自身的样式，但不适用于穿透到子组件的样式。
五、应用场景总结
在实际项目开发中，推荐采用 ::v-deep 穿透组件样式的方式来定制 Element UI/Element Plus 组件的禁用状态样式，这种方式更为直观、稳定且易于维护。对于动态添加样式的需求，优先考虑使用 Vue 的响应式数据绑定至 :style 特性来调整组件本身的样式，而非穿透到子组件。在 Vue 3.x 中，官方已不再推荐使用 $style，改用 <style> 标签结合 scoped 或 CSS 变量等方式进行样式管理。
