更改 Vuetify 复选框标签颜色？答案

【问题标题】：Change Vuetify checkbox label color?更改 Vuetify 复选框标签颜色？
【发布时间】：2020-08-29 21:48:31
【问题描述】：

我正在使用 vuetify 复选框，并且我已经设置了一个标签，但标签上应用了 color:rgba(0,0,0.54) 样式，它很轻，我正在尝试将颜色更改为 rgba:(0,0,0) 但我无法定位.v-label theme--light 类。

看看这个简单的codepen

查看下面的示例：-

new Vue({
  el: "#app",
  data() {
    return {};
  }
});

.v-label theme--light {
  color: rgba(0, 0, 0) !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app id="inspire">
    <v-checkbox label="myLabel"></v-checkbox>
  </v-app>
</div>

任何帮助将不胜感激。谢谢。

【问题讨论】：

我想你想把.v-label theme--light改成.v-label.theme--light？
哎呀！您可以将此添加为答案，我会接受。谢谢。
很高兴我能帮上忙。

标签： css vue.js vuetify.js

【解决方案1】：

如果您在应用中使用scss，则可以使用v-deep 覆盖vuetify 样式

.v-input--checkbox::v-deep {
  .v-label {
    color: rgba:(0,0,0);
  }
}

【讨论】：

【解决方案2】：

我认为你应该使用 v-label 和 ::v-deep 如果要更改 vuetify 中的任何内容，则应使用 ::v-deep。示例：` ::v-deep .v-标签

【讨论】：

【解决方案3】：

你可以添加一个类black-label到v-checkbox

<div id="app">
  <v-app id="inspire">
    <v-checkbox label="myLabel" class="black-label"></v-checkbox>
  </v-app>
</div>

然后更新作用域样式，如：

<style scoped>
.black-label label {
    color: rgba(0, 0, 0) !important;
}
</style>

演示：

new Vue({
  el: "#app",
  data() {
    return {};
  }
});

.black-label label {
    color: rgba(0, 0, 0) !important;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet">
<link href="https://unpkg.com/vuetify@1.0.18/dist/vuetify.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuetify@1.0.18/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-checkbox label="myLabel" class="black-label"></v-checkbox>
  </v-app>
</div>

【讨论】：

感谢您的帮助，是的，我最终选择了这条路线。 :)

【解决方案4】：

将.v-label theme--light 更改为.v-label.theme--light，它应该可以工作。

【讨论】：

虽然是一个快速的问题，但我怎样才能仍然使用范围样式来定位它。使用scoped 搞砸了。 :(