VuetifyJS：如何摆脱 v-stepper 组件提升？

Question

在 Vuetify 中使用 v-stepper 组件时，边缘上会出现一个默认的类似形状的边框：

我想删除它。我试图将 elevation 设置为 0，但它不起作用。

<v-stepper v-model="e1" class="elevation-{0}">

Codepen

如何实现？

Answer 1

添加一些 CSS 作品（至少用你的笔）：

.v-stepper__header {
  box-shadow: none;
} 

Answer 2

不是elevation-{0}，而是elevation-0。
海拔 docs：

You can set an element's elevation by using the class elevation-{n}, where n is a integer between 0-24 corresponding to the desired elevation.

所以实际上你也需要删除括号。
应该清楚因为据我所知你can't use parentheses in class names

Answer 3

就把下面的

<v-stepper v-model="e1" class="elevation-0">

Answer 4

<v-stepper v-model="e1" flat> 用于去除圆边和

.v-stepper__header {
  box-shadow: none;
}

移除header阴影