web-dev-qa-db-ja.com

何も壊さずにマテリアルコンポーネントにカスタムスタイルを追加する方法

vuetify vuejsのマテリアルデザインサポートでvuejsを使用していますが、マテリアルデザイン自体の慣習を破ることなく、カスタムcssスタイルをマテリアルデザインに追加する方法について混乱しています。

これはbootstrap）のようなもので、.row{}を呼び出してスタイルを上書きすることができますか、それともいくつかの点で異なりますか。

cssvue.jsmaterial-designvuetify.js
6
hidar

Vuetifyが必要なクラス名を自動的に追加するため、bootstrapとの違いはあまりないと思います。次のテンプレートの背景色を上書きするとします。

_<v-layout row justify-space-around></v-layout> 
_

_.row_で上書きするだけです

_.row {
  background: #123456;
}
_

以下のサンプルを確認してください。

new Vue({ el: '#app' })
_.row {
  background: #123456;
}

.theme--dark {
  width: 400px;
}

.card__text {
  font-weight: 800;
}_
_<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">

  <div id="app">
    <v-app>
      <main>
      <v-layout row justify-space-around>
        <v-card dark class="primary">
          <v-card-text>one</v-card-text>
        </v-card>
      </v-layout>        
      </main>
    </v-app>
  </div>_

_-_が____（例：_v-card-text_）に変換され、_theme--_がテーマの名前（例：dark）の前に付加されていることに注意してください。

3
choasia