How to add custom styles to material components without breaking anything

Question

I am using vuejs with vuetify a material design support for vuejs, but I am confused as to how I can add custom css styles to material design without breaking a convention of the material design itself.

It is like bootstrap where we can call .row{} and override the styling or does it differ in some ways.

Answer 1

I don't think there're many differences from bootstrap since vuetify will automatically add necessary class names for you. Suppose you want to override the background color of the following template.

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

Just override it with .row

.row {
  background: #123456;
}

Check the sample below.

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>

Please notice that - was converted to __ (e.g. v-card-text) and theme-- was prepended to the theme's name (e.g. dark).