如何更改/覆盖 vuetify 中开关标签的默认颜色？答案

【问题标题】：How to change/override the default color of a switch label in vuetify?如何更改/覆盖 vuetify 中开关标签的默认颜色？
【发布时间】：2019-06-19 17:58:56
【问题描述】：

从 vuetify 的官方文档中可以看出，开关的标签有自己预定义的颜色。我如何覆盖它们以获取黑色文本？我将开关作为道具从一个名为表单结构的全局组件传递到另一个我命名为“Primary”的组件

https://vuetifyjs.com/en/components/selection-controls

<v-switch v-if="externalSwitch" model="switch2":label="externalSwitchLabel"> 
</v-switch>

<v-layout v-for="info in information" :key="info.title">
  <v-flex>
    <form-structure :externalSwitchLabel="`${info.title}`" 
      :externalSwitch="true" :hasSubTitle="true" :subTitle="`${info.status}`" 
      :script="`${info.script}`">
    </form-structure>
  </v-flex>
</v-layout>

我的数组如下所示：

information : [
  {title: "Something1", status:"active", script: "Hello"},
  {title: "Something2", status:"in Progress", script: "Ciao" }
]

我的 CSS 看起来像这样：

<style scoped>
.v-label.theme--light {
  color: black
}
</style>

【问题讨论】：

您好，请提供一些尝试过的代码
您好，我刚刚更新了问题并添加了更多详细信息。
您尝试过以下方法吗？ .v-label.theme--light{ color: black !important; }
是的，我试过了，没用。只有当我从我的样式中取出 scoped 时它才有效，但它会更改每个其他页面和每个文本字段上的每个标签。
查看此答案以了解您的 css 无法正常工作的原因stackoverflow.com/a/50985784/1981247

标签： vue.js vuejs2 vue-component vuetify.js nuxt.js

【解决方案1】：

我尝试了插槽方法，它对我有用：

<v-switch>
   <template v-slot:label>
      <span class="input__label">Label text</span>
   </template>
</v-switch>

CSS 看起来像这样：

.input__label {
   color: black;
}

【讨论】：

【解决方案2】：

您可以使用color 属性，方法是给它rgb 或hexadecimal 值，如下所示：

new Vue({
  el: '#app',
  data () {
    return {
   
      switch1: true,
      switch2: true
    }
  }
})

.v-input__slot .v-label{
color: black!important
}

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css">
<div id="app">
  <v-app id="inspire">
    <v-container fluid px-0>
     
      <v-switch
        :label="`Switch 1: ${switch1.toString()}`"
        v-model="switch1"
                color="#f45525"
      ></v-switch>
       <v-switch
        :label="`Switch 2: ${switch2.toString()}`"
        v-model="switch2"
                color="rgb(0,150,45)"
      ></v-switch>
    </v-container>
  </v-app>
</div>

【讨论】：

感谢您的帮助，但将颜色作为道具传递也不起作用。
哦，我明白了，我的意思是文本本身的颜色，所以在这种情况下，它将是“开关 1 的颜色：真为黑色”，而不是开关本身的颜色。
对不起，我误解了你，但我正在寻找一种方法来解决这个问题
尝试我在答案中添加的 css 规则
对不起兄弟，但这也无济于事。

【解决方案3】：

如果您不想覆盖标签的默认样式，可以将一个槽传递给v-switch，并使用您想要的样式元素。

例子：

<v-switch v-model="enableScreenshot" label="Enable Screenshot">
   <template v-slot:label>
      <span class="v-label-white">Enable Screenshot</span>
   </template>
</v-switch>

那么你的风格：

.v-label-white {
  color: white;
  font-weight: bolder
}

【讨论】：

【解决方案4】：

您只需要从样式中删除 scoped：

<style>
.v-label.theme--light{
  color: black
}
</style>

这意味着样式将在应用程序中全局应用。

【讨论】：

【解决方案5】：

试试这个。

.v-input--is-label-active label {
    color: red !important;
}

【讨论】：