Search code examples
javascriptvue.jsvuetify.jsv-stepper

VuetifyJS: how to get rid of the v-stepper component elevation?

When using the v-stepper component in Vuetify, there is a default border like shape that appears on the edges:

enter image description here

I want to remove it. I tried to set the elevation to 0 but it did not work.

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

Codepen

How to achieve this?

Solution

  • Not elevation-{0}, but elevation-0.
    Elevation 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.

    So actually you need to remove parentheses as well.
    Should be clear because you can't use parentheses in class names as far as I know.