vuetify.js - 如何从单个文件组件中的范围样式覆盖 Vuetify 文本字段下划线？

Question

我正在尝试从单个文件组件的范围样式更改未聚焦常规 v-text-field的下划线边框的默认颜色，但我无法覆盖它。我已经用标签类上的深度选择器覆盖了文本字段标签的字体大小，如下所示：

.v-text-field >>> .v-label {
  font-size: 14px;
}

...这行得通。Chrome 开发工具向我展示了负责下划线的类是：

.theme--light.v-text-field > .v-input__control > .v-input__slot::before {
    border-color: rgba(0, 0, 0, 0.42);
}  

我尝试了以下变体，但都没有奏效：

/* .theme--light.v-text-field >>> .v-input__control >>> .v-input__slot::before { */
/* .theme--light.v-text-field > .v-input__control >>> .v-input__slot::before { */
/* .v-text-field >>> .v-input__control >>> .v-input__slot::before { */
/* .v-text-field > .v-input__control >>> .v-input__slot::before { */
/* .v-input__control >>> .v-input__slot::before { */
.v-input__slot::before {
  border-color: rgb(255, 0, 0) !important;
}

顺便说一句，我这样做只是因为似乎没有任何暴露的道具v-text-field可以改变边框颜色（我对此感到惊讶），除非我误解了？

标签： vuetify.js

Answer 1

不幸v-text-field的是没有暴露任何道具来改变边框颜色。但是，您仍然可以使用深度选择器来覆盖边框颜色。在第一个示例中，您使用>>>了覆盖字体大小。同样适用于边框颜色。

例子

.v-text-field >>> .v-input__slot::before  { border-color: rgb(255, 0, 0) !important; }

或者

::v-deep .v-input__slot::before  { border-color: rgb(255, 0, 0) !important; }

即使与

>>> .v-input__slot::before  { border-color: rgb(255, 0, 0) !important; }

有关深度选择器的更多信息