Comment modifier le style d'un composant dynamique dans vue

J'ai rencontré un besoin, celui de basculer le thème entre la nuit et le jour d'un simple toucher. 

Ensuite, j'utilise la bibliothèque de composants d'element-ui et la bibliothèque de composants d'el-input.

Nous avons constaté qu'il avait mis une couche de boîtes à l'extérieur, car le statut de la couleur du thème que j'ai changé était placé dans vuex. Grâce à ce statut, je peux changer la couleur du thème. Comment puis-je changer le style du composant via ce statut. Après avoir réfléchi 10 secondes, j'ai finalement trouvé une solution !

Même si on met une boite à l'extérieur, on utilise les caractéristiques du sélecteur descendant pour changer son style, sans parler du code.

 <!-- 这里咋们包了一个div 然后绑定了动态的class ，我vuex里的状态 individual 控制的-->
 <div :class="['query-input', {'dark' : individual,'light': !individual}]">
      <el-input
        type="textarea"
        placeholder="请在此尽可能详细的描述您的提问..."
        v-model="queryValue">
      </el-input>
    </div>

// vuex 读取主题色的状态
 computed: {
      individual: {
        get() {
          return this.$store.state.base.theme;
        }
      }
    },

 Laisse-moi parler ici, la profondeur doit être un sous-composant

.dark /deep/.el-textarea__inner{
  background-color: var(--night-gb-color) !important;
}
.light /deep/.el-textarea__inner{
  background-color: var(--daytime-gb-color) !important;
}