Question

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

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

Answer 1

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

Answer 2

您可以将类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>

Answer 3

我认为你应该使用 v-label 和 ::v-deep 如果你想改变 vuetify 中的任何东西，你应该使用 ::v-deep。例如：` ::v-deep .v-label

更改Vuetify复选框标签的颜色？

3 个答案: