Question

我正在使用带有vuetify vuejs的材料设计支持的vuejs，但我很困惑如何在不破坏材料设计本身的惯例的情况下为材料设计添加自定义css样式。

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

Answer 1

我认为与引导程序存在许多不同之处，因为vuetify会自动为您添加必要的类名。假设您要覆盖以下模板的背景颜色。

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

只需使用.row

覆盖它

.row {
  background: #123456;
}

检查下面的示例。

＆＃13;

new Vue({ el: '#app' })

＆＃13;

.row {
  background: #123456;
}

.theme--dark {
  width: 400px;
}

.card__text {
  font-weight: 800;
}

＆＃13;

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

＆＃13;

请注意，-已转换为__（例如v-card-text），并且theme--被添加到主题的名称前（例如dark ）。

如何将自定义样式添加到材质组件而不会破坏任何内容

1 个答案: