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

Question

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

它类似于 bootstrap，我们可以调用 .row{} 并覆盖样式，或者它在某些方面有所不同。

Answer 1

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

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

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

How to add custom styles to material components without breaking anything

css

vue.js

material-design

vuetify.js