Remove box-shadow from Vuetify component

Question

I have

an expanded-row-table from Vuetify, it came with box shadow on the row while expanded

to remove the box-shadow, I checked the console-style tab, I see

so I decided to add this code in the bottom of my show.vue

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

I don't see any effect, shadow still there.

You maybe need a [deep selector](https://stackoverflow.com/a/55368933/8816585)? If you cannot see your `box-shadow: none` CSS property, something is missing in terms of scope/reach to the given component. — kissu, Apr 05 '22 at 16:48

score 2 · Accepted Answer · answered Apr 05 '22 at 17:40

2

As explained in this answer, you may use deep selectors.

In your case, this seems to work

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

answered Apr 05 '22 at 17:40

kissu

score 0 · Answer 2 · answered Apr 05 '22 at 17:22

0

Can you try to put it in a style tag that is not scoped (i.e without the scoped).

Like

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

answered Apr 05 '22 at 17:22

Micheal Adisa