在 Vuetify 复选框组件中，如何更改禁用的复选框框颜色？答案

【问题标题】：In Vuetify's checkbox component, How to change disabled checkbox's box color?在 Vuetify 复选框组件中，如何更改禁用的复选框框颜色？
【发布时间】：2021-02-14 17:17:07
【问题描述】：

我使用 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>

【问题讨论】：

标签： css typescript vue.js nuxt.js vuetify.js

【解决方案1】：

在style 中使用scoped 有点棘手。使用作用域，父组件的样式不会泄漏到子组件中。您可以使用深度选择器>>>（如here 解释），但我认为这个解决方案不是最好的。 Css 最好使用 BEM 表示法。在你的情况下，我会这样做：

 <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>

因此，没有与其他组件发生冲突的风险。

【讨论】：

非常感谢！！我真的很感激！

【解决方案2】：

如果有人仍然有这个问题。除了使用disabled 属性，您可以使用readonly 属性并且仍然可以设置colour="success" 或您想要的任何其他颜色。

【讨论】：