动态修改el-input样式；动态修改elmentUI元素样式；css变量

场景：正常我们动态修改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>

三、vue3里修改element组件样式

直接使用v-bind(变量)即可

let displayValue = ref(props.mode !== 'view' ? 'block' : 'none')



<style lang="scss" scoped>
:deep(.el-form-item__label:before) {
  display: v-bind(displayValue) !important;
}
</style>

---

总结

其他的组件或者组件库，动态修改样式，同样道理