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

Question

我将vuejs与vuetify一起用于vuejs的材质设计支持中，但是我对如何在材质设计中添加自定义CSS样式而不破坏材质设计本身的约定感到困惑。

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

Answer 1

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

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

只需覆盖它.row

.row {
  background: #123456;
}

检查下面的示例。

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

.row {
  background: #123456;
}

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

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