Scoped css class with elements-CodePudding

I use vue with vuetify. I have to use sass to override the style of vuetify components. With the following code I want to update the style of my text field.

<style scoped lang="scss">
.center {
    input {
        text-align: center;
    }
}
</style>

Without the scope attribute it works. But how do I make it work and only apply the current component?

<v-text-field v-model="myText"  @input="onTextInput" />

Thanks

CodePudding user response：

For Vue2 you need to add ::v-deep before the class.

Ex:

::v-deep .target-class {
    background-color: #000;
}

For Vue3

:deep(.target-class) {
  background-color: #000;
}