如何在 Vuetify 组件上应用自定义/覆盖 CSS？

Question

假设我在我的 Vue 组件中添加了v-text-fieldVuetify 组件，例如

<v-text-field v-model="email"name="email" type="email" color="#90C143" label="Email">

当我检查该元素时，它会生成正常的 HTML，例如

<div class="v-input v-input--has-state theme--light v-text-field v-text-field--is-booted" style="">
      <div class="v-input__control">
        <div class="v-input__slot">
          <div class="v-text-field__slot">
            <label for="input-39" class="v-label theme--light" style="left: 0px; right: auto; position: absolute;">Email
            </label>
            <input name="email" id="input-39" type="email">
          </div>
          <div class="v-input__append-inner">
            <div class="v-input__icon v-input__icon--">
              <i role="button" class="v-icon notranslate v-icon--link material-icons theme--light" style="">                    
              </i>
            </div>
          </div>
        </div>
      </div>
    </div>

v-text-field如果我想在不影响功能的情况下自定义整个 CSS，我必须处理什么

Answer 1

在组件中添加一个 css 类：

<style scoped>
.text-field{
    color: #90C143 !important; /* this will override the existing property applied */
    /* add whatever properties you want */
}
</style>

然后在组件中将其添加到类而不是颜色属性中：

<v-text-field v-model="email"name="email" type="email" class="text-field" label="Email">

您只能使用vuetify 文档中给出的预定义类。

如果你想在 color 属性上使用自定义颜色，你可以在 main.js 的 Vuetify 对象中设置自己的主题：

Vue.use(Vuetify)

const vuetify = new Vuetify({
  theme: {
    themes: {
      light: {
        primary: '#90C143',
        secondary: '#b0bec5',
        anchor: '#8c9eff',
      },
    },
  },
})

现在您可以在任何组件中使用指定的主题覆盖：

<v-text-field v-model="email"name="email" type="email" color="primary" label="Email">

您也可以在以下位置全局应用 CSS app.vue：

<style>
/* don't use scoped css */

.theme--light.v-text-field>.v-input__control>.v-input__slot:before {
    border-color: #90C143;
}

.theme--light.v-label {
    color: #90C143;
}

.theme--light.v-input:not(.v-input--is-disabled) input, .theme--light.v-input:not(.v-input--is-disabled) textarea {
    color: #90C143;
}
</style>