如何更改 vuetify 复选框标签样式？答案

【问题标题】：How to change vuetify checkbox label style?如何更改 vuetify 复选框标签样式？
【发布时间】：2021-03-07 11:09:36
【问题描述】：

谁能解释我如何将 css 设置为 vuetify 复选框？我想更改字体、大小等，但我不知道如何在样式部分访问它。这是我的复选框：

<v-checkbox
  class="type-box"
  dense
  v-for="type in feedTypeFilterList"
  :key="type.name"
  v-model="type.isSelected"
  :label="type.name"
/>

感谢您的帮助。

【问题讨论】：

标签： javascript css vue.js vuetify.js

【解决方案1】：

我不确定这是否是正确的做法。但是使用 Vuetify，您也可以使用插槽。

通过这种方式，您可以使用添加标签并根据需要设置样式。

<v-checkbox>
  <template v-slot:label>
    <span id="checkboxLabel">Label Content</span>
  </template>
</v-checkbox>

<style>
#checkboxLabel {
   color: blue;
   font-size: 16px;
}
</style>

如果还有什么，请告诉我！

【讨论】：

【解决方案2】：

official example for custom label

我认为，这更有用。要想用好vue，就得用好slot。它让你更有效率。

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-checkbox v-model="checkbox">
        <template v-slot:label>
          <div>
            I agree that
            <v-tooltip bottom>
              <template v-slot:activator="{ on }">
                <a
                  target="_blank"
                  href="http://vuetifyjs.com"
                  @click.stop
                  v-on="on"
                >
                  Vuetify
                </a>
              </template>
              Opens in new window
            </v-tooltip>
            is awesome
          </div>
        </template>
      </v-checkbox>
    </v-container>
  </v-app>
</div>

<script>
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      checkbox: false,
    }
  },
})
</script>

【讨论】：

【解决方案3】：

Vuetify 在 CSS 上具有非常高的特异性，但使用 ::deep 很容易覆盖。

在这里，我将复选框和标签文本的颜色和字体大小设置为相同。这种颜色样式只会影响未选中的复选框。为了使选中的复选框（包括状态之间的动画）也得到白色，您还应该在v-checkbox 上添加color="white"。

在模板中添加复选框

这里，color="white" 控制选中复选框的颜色，而不是未选中复选框的颜色。

<v-checkbox
  v-model="theModel"
  color="white"
  label="This text will soon be white"
/>

使用 SCSS，样式看起来像这样

使用:deep 会覆盖 vuetify 样式，让您可以创建所需的外观

.v-input--checkbox::v-deep {
  .v-label, .v-icon {
    color: white;
    font-size: 22px;
  }
}

【讨论】：