Vuetify: [Feature Request] v-expansion-panel-content style

[The28AWG]

Problem to solve

The component creates its own wrapper for the content. Therefore, it is not possible to define styles or classes for content.

Proposed solution

A good solution is to let the wrapper inherit the component styles.

[KaelWD]

https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

[The28AWG]

Good advice. But I'm not sure this is a good practice. Especially if I define existing styles. For example, padding.

[KaelWD]

Well inherit isn't either, you'd end up with double.

[The28AWG]

For me, English is not native, I definitely can not express myself.
Let's say we have a code like this:

<v-expansion-panel-content class="pa-0">
<span>test</span>
</v-expansion-panel-content>

This code in the browser will look like this:

<div class="v-expansion-panel-content pa-0">
<div class="v-expansion-panel-content__wrap">
<span>test</span>
</div>
</div>

And you need this:

<div class="v-expansion-panel-content">
<div class="v-expansion-panel-content__wrap pa-0">
<span>test</span>
</div>
</div>

[tbacon1991]

Hi, Did you resolve this??
I am using slots to pass information into the tabs and all of the styling is being completely overwritten by the v-expansion-panel__wrap div.
Even my paragraph and text are not being styles by Vuetify classes.

[The28AWG]

Deep selectors is great!
https://github.com/vuetifyjs/vuetify/issues/10361#issuecomment-579274390

[alejandroguille]

Hi, Did you resolve this??

[The28AWG]

@alejandroguille deep selector, read up.

.v-expansion-panel-content >>> .v-expansion-panel-content__wrap { /*you style*/ }