web-dev-qa-db-ja.com

Vuetifyコンポーネントにカスタム/オーバーライドCSSを適用する方法は？

Vuetifyのv-text-fieldコンポーネントをVueコンポーネントに追加したとします。

<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全体をカスタマイズする場合

htmlcssvue.jsvuetify.jsvue-material
2
Ronak Solanki

コンポーネント内にcssクラスを追加し、

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

次に、コンポーネントでこれをcolorプロパティの代わりにクラスに追加します

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

それでも、テキストフィールドのデフォルトの色をグローバルに変更したい場合、app.vueでこれらのCSSを使用します

//スコープを使用しない

<style>
.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>
0
chans