I want to override the css of a child vuetify component.

.filterOPV > div > div {
  min-height: 30px !important;

}
.filterOPV > div > div > div  {
  background: #f5f5f5 !important;
}

          <v-flex md2 >
            <v-select
              :items="sortOPV"
              label="Filtre OPV"
              dense
              solo
            />
          </v-flex>

I tried the code above, but nothing changes.

I saw that some people were using Deep Selectors but it doesn't work too.

CodePudding user response：

You need to use :deep selector

<style scoped>
.filterOPV :deep(.v-input__control) {
  min-height: 30px !important;

}
.filterOPV :deep(.v-field)  {
  background: #f5f5f5 !important;
}
</style>

CodePudding user response：

You can do this via two methods-

1. Using ::v-deep

<style scoped>
.filterOPV ::v-deep .v-input__control {
    min-height: 30px !important;
}
.filterOPV ::v-deep .v-input__slot {
    background: #f5f5f5 !important;
}
</style>

2. Using >>>

<style scoped>
.filterOPV >>> .v-input__control {
    min-height: 30px !important;
}
.filterOPV >>> .v-input__slot {
    background: #f5f5f5 !important;
}
</style>

Meaningful-

>>> is identical to ::v-deep. The basis for having these two ways is that when you are using pre-compilers, like SASS, they may have problems learning >>> and will fail to compile your CSS. If this occurs, switch to ::v-deep.