Style overrides?

[theGrower]

Easy way to override styles? Simple things like the background color, visited, and so forth? ... the example you put on your demo page lets the background through well; however, on my app all the background is varying shades of gray.

[adi518]

Yes, so you can customize the stepper to a degree without overriding styles. Overriding styles is basically a hack, so instead we use "scoped-slot" approach, aka "render-prop" (as they call it in React). The stepper exposes two slots per step, step-{n} and step-{n}-index. The latter allows you to compose the step index into your own template and style. Here's an example:

<template>
  <v-stepper>
    <template slot="step-1-index" slot-scope="scope">
      <div class="step-index"> {{ scope.displayIndex }} </div>
    </template>
  </v-stepper>
</template>

<style>
.step-index {
  /* go crazy */
}
</style>

[theGrower]

/ go crazy / I will. Thanks for your help.

[adi518]

It's a little hard to tell what you did. Do you have a repro?

[theGrower]

I'm on vacation so I can't copy and paste my CSS. However, if you inspect the HTML of your page you can figure our the higherarchy of your CSS and set up your classes appropriately. e.g. div > stepper > v-step {} ... And so forth. Once you've figured out the higherarchy, then you can set each property to change everything; text, background, shadow, etc.

I turned off the ability to click the stepper to force use of the buttons. Here is that code as an example of what I mean above. I posted this in the prevent click feature request as well.

     /* prevent click events on all steppers */
div.v-stepper > div.v-stepper-root > div.v-step {
    pointer-events: none;
}