如何在不破坏任何东西的情况下向材料组件添加自定义样式

Question

我正在使用带有vuetify vuejs 的材料设计支持的 vuejs，但我对如何在不违反材料设计本身约定的情况下将自定义 css 样式添加到材料设计中感到困惑。

它就像引导程序，我们可以调用.row{} 并覆盖样式或在某些方面有所不同。

Answer 1

我认为与 bootstrap 没有太多区别，因为 vuetify 会自动为您添加必要的类名。假设您要覆盖以下模板的背景颜色。

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