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

Posted 2023-02-22

【中文标题】如何在 Vuetify 组件上应用自定义/覆盖 CSS？

【英文标题】：How to apply custom/override CSS on Vuetify component?

【发布时间】：2020-02-16 01:35:00

【问题描述】：

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

<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，我必须处理什么

【参考方案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 documentation 中提供的预定义类。

如果你想在颜色属性上使用自定义颜色，你可以设置你的 在 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">

您也可以在 app.vue 中全局应用 CSS：

<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>

【讨论】：

好的，但是如果我想为特定 vuetify 组件自定义所有 CSS 并且不想使用 !important CSS 属性该怎么办。

只需在开发者控制台中检查css类，并在app.vue中用自己的风格覆盖该类

好的，非常感谢

如果您有任何链接，我可以使用 vuetify 材料设计设计移动视图以及桌面视图，请分享...

了解 vuetify 中的网格布局，这足以让您的视图具有移动响应性