【问题标题】:I can't change the text color of the boolean checkbox in Vuetify (version -> nuxtjs/vuetify: "0.5.5")我无法更改 Vuetify 中布尔复选框的文本颜色(版本 -> nuxtjs/vuetify:“0.5.5”)
【发布时间】:2019-09-08 05:35:59
【问题描述】:

我正在使用 nuxt.js 和 vuetify 创建一个网站,我想将布尔复选框文本的颜色更改为黑色,默认为白色,请参阅 here!如何更改颜色?

我已经尝试过使用black--text这个类

这是我写的一些代码:

<v-container>
    <v-form
        ref="form"
        v-model="valid"
        lazy-validation
      >
        <p>{{ radios || 'null' }}</p>
        <v-radio-group v-model="radios" :mandatory="true">
          <v-radio label="Radio 1" value="radio-1" class="black--text" />
          <v-radio label="Radio 2" value="radio-2" class="black--text" />
        </v-radio-group>
      </v-form>
</v-container>

这是它的脚本

<script>
export default {
  data() {
    return {
      radios: 'radio-1',
      valid: true
    }
  }
}
</script>

我希望收音机文本的颜色是黑色的,但它仍然是白色的。

【问题讨论】:

标签: vuetify.js nuxt.js


【解决方案1】:

由于文档提供了here,因此似乎无法使用道具执行此操作。

所以,另一种解决方案是在vue单文件组件中使用vue.js deep selector:

<template>
<v-radio label="Radio 1" value="radio-1" class="black--text" />
</template>

<style scoped>
.black--text /deep/ label {
    color: black;
}
</style>

【讨论】:

  • 我试过了,但它只是改变了单选圆圈的颜色,但我想改变文本的颜色。
  • 我改了答案。
  • 如果我使用 lang="scss"
【解决方案2】:

给槽添加标签

<v-radio>
  <span slot="label" class="red--text">My label</span>
</v-radio>

适用于 Vue 2、Vuetify 2.3

【讨论】:

    猜你喜欢
    • 2020-08-29
    • 1970-01-01
    • 2020-07-30
    • 2020-04-21
    • 2021-11-27
    • 2019-02-14
    • 1970-01-01
    • 2019-10-31
    • 2019-07-05
    相关资源
    最近更新 更多