Vuetify:如何修改步骤的默认颜色?

时间:2018-09-19 07:11:48

标签: javascript css vuetify.js

我正在使用Vuetify的Stepper组件。

默认情况下,步骤的颜色为蓝色:

enter image description here

相应的代码是:

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

Codepen上进行实时测试。

2 个答案:

答案 0 :(得分:1)

您可以使用CSS覆盖默认颜色。元素为v-stepper__step__step .primary

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

enter image description here

答案 1 :(得分:1)

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

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

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