Css 在Vuetify'；s复选框组件，如何更改禁用的复选框'；盒子的颜色是什么？

我使用Vuetify.js作为Nuxt.js的UI框架， 当复选框禁用值更改为“false”时，我想更改复选框的颜色。 我想如果我用CSS更改复选框对应部分的值，我可以更改复选框的颜色。但它不起作用。 有人能给我建议吗？ 我的代码是下面的代码

    <template>
  <v-card>
    <v-card-text>
      <v-container>
        <v-row>
          <v-col cols="4">
            <v-checkbox
              :label="`Checkbox A:${checkboxA}`"
              v-model="checkboxA"></v-checkbox>
          </v-col>
          <v-col cols="4">
            <v-checkbox
              :label="`Checkbox B:${checkboxB}`"
              :disabled="!checkboxA"></v-checkbox>
          </v-col>
        </v-row>
      </v-container>
    </v-card-text>
  </v-card>
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component({})
export default class extends Vue{
  checkboxA:boolean = false
  checkboxB:boolean = false
  checkboxC:boolean = false
}
</script>

<style lang="scss" scoped>
.div ::v-deep .v-input--selection-controls__input{
  background: gray;
}
</style>

从“nuxt属性装饰器”导入{Component，Vue}
@组件（{}）
导出默认类扩展Vue{
checkboxA:boolean=false
checkboxB:boolean=false
checkboxC:boolean=false
}
.div:：v-deep.v-input--选择控制输入{
背景：灰色；
}

在

样式中使用
范围
有点棘手。有了作用域，父组件的样式将不会泄漏到子组件中。您可以使用深度选择器
>>
（如前所述），但我认为这个解决方案不是最好的。Css最好使用边界元表示法。就你而言，我会：

 <template>
  <v-card>
    <v-card-text>
      <v-container class="Card__container">
        <v-row>
          <v-col cols="4">
            <v-checkbox
              :label="`Checkbox A:${checkboxA}`"
              v-model="checkboxA"></v-checkbox>
          </v-col>
          <v-col cols="4">
            <v-checkbox
              :label="`Checkbox B:${checkboxB}`"
              :disabled="!checkboxA"></v-checkbox>
          </v-col>
        </v-row>
      </v-container>
    </v-card-text>
  </v-card>
</template>
<script lang="ts">
...
</script>

<style lang="scss">
.Card__container {
    .v-input--selection-controls__input{
      background: gray;
    }
}
</style>


...
.Card\u容器{
.v-input—选择控制输入{
背景：灰色；
}
}

因此，不会与其他组件发生冲突。
非常感谢！！我真的很感激！！