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

Question

我正在使用 vuejs 和 vuetify对 vuejs 的 Material 设计支持，但我对如何在不破坏 Material 设计本身的约定的情况下将自定义 css 样式添加到 Material 设计感到困惑。

它就像 Bootstrap ，我们可以在其中调用 .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)。