javascript - Vuetify: how to modify the step's default color? - Stack Overflow

admin管理员组

文章数量:1403369

I am using the Vuetify's Stepper ponent.

By default, the step's color is blue:

Corresponding piece of code is:

<v-stepper-step :plete="e1 > 1" step="1">Name of step 1</v-stepper-step>

Live test on Codepen.

I am using the Vuetify's Stepper ponent.

By default, the step's color is blue:

Corresponding piece of code is:

<v-stepper-step :plete="e1 > 1" step="1">Name of step 1</v-stepper-step>

Live test on Codepen.

• javascript
• css
• vuetify.js

Share Improve this question Follow asked Sep 19, 2018 at 7:11 Billal BEGUERADJBillal BEGUERADJ 22.8k4545 gold badges123123 silver badges140140 bronze badges 2

• Have you used a custom theme ? – laruiss Commented Sep 19, 2018 at 7:14
• No, I am not using a custom theme, all is set to the default theme @laruiss – Billal BEGUERADJ Commented Sep 19, 2018 at 7:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You can simply pass a color to color attribute on v-stepper-step ponent.

<v-stepper-step color="red">Step 1</v-stepper-step>

Custom theme colors e.g. color="success" will work as well.

You can overwrite the default color with CSS. The element is v-stepper__step__step .primary :

.v-stepper__step__step.primary {
    background-color: red !important;
    border-color: red !important;
}

本文标签： javascriptVuetify how to modify the step39s default colorStack Overflow