javascript - Vuetify.js:v-stepper 中的 color prop 在 Gitlab 上部署时不生效。如何将颜色 Prop 移动到 CSS 类？

Question

使用 Vuetify.js v-stepper组件，我可以使用 color 属性更改 v-stepper-step 的颜色:

<v-stepper-step :complete="e1 > 2" color="red" step="2">Name of step 2</v-stepper-step>

当我在 Nuxt.js 中使用 Vuetify 并在本地启动服务器时，这工作正常。但是我注意到当我在 Gitlab 上部署我的应用程序时，颜色属性没有生效并且检查有问题的元素只是显示一个空样式:

element.style {
}

这就是我尝试使用类的原因:

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

这是 CSS 类:

.step-number {
  background-color: yellow;
  color: red;
}

我这样做是希望在 CSS 类中操作颜色属性并在 Gitlab 上再次部署以查看输出，但这甚至在本地也不起作用。

如何克服这个问题？

Codepen .

Answer 1

CSS 颜色 property用于设置文本样式。它不同于 vue 属性 color。

您可以使用(demo):

.step-number > .v-stepper__step__step{
  background-color: red !important;
  border-color: red !important;
}