Get rid of the box-shadow on the Vuetify element

Question

I currently have

a special-table component that includes a box shadow when the row is expanded

the removal of the box-shadow effect. After inspecting the console-style tab, I identified

Following this discovery, I attempted to add the following code snippet at the end of my show.vue file:

.v-data-table > .v-data-table__wrapper tbody tr.v-data-table__expanded__content {
    box-shadow: none !important;
}

However, despite my efforts, the box shadow still persists and remains visible.

Answer 1

To achieve the desired effect, you can utilize deep selectors as suggested in this response.

For your specific situation, try implementing the following CSS:

>>> .v-data-table > .v-data-table__wrapper tbody tr.v-data-table__expanded__content {
  box-shadow: none !important;
}

Answer 2

To achieve the desired effect, you can utilize deep selectors as suggested in this response.

For your specific situation, try implementing the following CSS:

>>> .v-data-table > .v-data-table__wrapper tbody tr.v-data-table__expanded__content {
  box-shadow: none !important;
}

Answer 3

Is it possible for you to place the code within a style tag that is not scoped (without using the scoped attribute)?

For example:

<style>
 .v-data-table > .v-data-table__wrapper tbody tr.v-data-table__expanded__content {
   box-shadow: none !important;
 }
</style>

Answer 4

Is it possible for you to place the code within a style tag that is not scoped (without using the scoped attribute)?

For example:

<style>
 .v-data-table > .v-data-table__wrapper tbody tr.v-data-table__expanded__content {
   box-shadow: none !important;
 }
</style>