场景：正常我们动态修改div元素的样式，使用:style和:class即可；但是我们想要动态修改element的组件样式时候，例如el-input字体颜色，由于el-input的样式嵌套很深，我们需要修改的实际是.el-input__inner这个样式的color，但是我们在html又没法拿到这个类名。
解决办法：使用css变量修改
一、css变量是什么？
1.css变量
css变量具体可以看这篇
注意：1.声明变量的时候，变量名前面要加两根连词线 –
2.变量使用var() 函数包裹，还可以使用第二个参数，表示变量的默认值。如果变量不存在，就会使用这个默认值
以下代码中，声明了两个变量:--shadow、--size
div {font-size: var(--size, 18px);box-shadow: var(--shadow);}
二、修改el-input字体颜色
1.原先正常修改字体颜色
/deep/ .el-input__inner {color: red}
2.动态修改el-input字体颜色
思路：
1.给css引入一个变量
--inputColor
/deep/ .el-input__inner {color: var(--inputColor); //使用css变量 注意变量前需要加 --}
2.vue声明一个变量颜色
colorVal例如 #606266
data (){return {colorVal: '#606266',}}
3.需要修改的地方，为
--inputColor变量赋值
<el-input v-model="valueStr" :style="{ '--inputColor': colorVal}"></el-input>
4.动态js修改
colorVal即可
this.colorVal = 'red'
需要注意：--inputColor是css变量，帮助引导的，colorVal才是设置的样式值
3、以下代码可直接复制
<template><div><el-input v-model="valueStr" :style="{ '--inputColor': colorVal}" @input="change1"></el-input></div></template><script>export default {data () {return {valueStr: '',colorVal: '#606266',}},created () {},methods: {change1 () {var r = Math.floor(Math.random() * 256)var g = Math.floor(Math.random() * 256)var b = Math.floor(Math.random() * 256)// 设置随机色var color = '#' + r.toString(16) + g.toString(16) + b.toString(16)this.colorVal = color},},}</script><style lang="less" scoped>/deep/ .el-input__inner {color: var(--inputColor); //使用css变量 注意变量前需要加 --}</style>
总结
其他的组件或者组件库，动态修改样式，同样道理
