传送门：CSS中 自定义属性（变量）详解
1. 需求及解决方案
需求：通常我们动态修改 div 元素的样式，使用 :style 和 :class 即可；但想要动态修改 如：Element-ui 中输入框（input）组件的字体颜色时，由于 el-input 的样式嵌套很深，需要修改的实际是 .el-input__inner 这个样式类的 color，但我们在 HTML 中没法直接拿到这个类名。
解决方案及相关步骤：通过 CSS 中的变量（自定义属性） 结合样式穿透实现；
为对应的 CSS 类引入变量 --inputColor；
/deep/ .el-input__inner {
color: var(--inputColor); // 使用css变量 注意变量前需要加 --
}声明变量颜色 colorVal 如： red，并在需要修改的地方，为 --inputColor 变量赋值；
data (){
return {
colorVal: 'red',
}
}<el-input v-model="inputVal" :style="{ '--inputColor': colorVal}"></el-input>最后，动态 js 修改 colorVal 即可；
this.colorVal = '#b2fdd2';注意：–inputColor 是 css 变量，帮助引导的，colorVal 才是设置的样式值;
2. 完整代码及效果
<template>
<div class="home">
<el-input
:style="{ '--inputColor': colorVal}"
v-model="inputVal"
@input="valInput">
</el-input>
</div>
</template>
<script>
export default {
data() {
return {
inputVal:'',
colorVal: 'red',
};
},
methods:{
valInput(){
let r = Math.floor(Math.random() * 256),
g = Math.floor(Math.random() * 256),
b = Math.floor(Math.random() * 256);
// 设置随机色
this.colorVal = '#' + r.toString(16) + g.toString(16) + b.toString(16);
}
},
};
</script>
<style lang="scss" scoped>
.home{
width: 200px;
::v-deep .el-input__inner {
color: var(--inputColor);
}
}
</style>效果：
