How to modify dynamic component style in vue

I encountered a need, which is to switch the theme between night and day with one touch. 

Then I use the component library of element-ui and the component library of el-input.

We found that he put a layer of boxes on the outside, because the status of the theme color I switched was placed in vuex. Through this status, I can change the theme color. How can I change the style of the component through this status. After thinking for 10 seconds, I finally came up with a solution!

Even if we put a box outside, we use the characteristics of the descendant selector to change its style, not to mention the 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;
        }
      }
    },

 Let me talk here, deep must be a subcomponent

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