Stylization vuetify component v-expansion-panel__header

Question

I have a Vuejs component with Vuetify and pug.

.moreQuestion__wrapper
        v-expansion-panel.moreQuestion__wrapper-panel
            v-expansion-panel-content(v-for="(question, i) in 
            questions" :key="i" expand-icon="arrow_drop_down")
                <template v-slot:header>
                  .moreQuestion__wrapper-slot {{ question }}
                </template>
                v-card
                    v-card-text.moreQuestion__wrapper-text {{ content }}

What the main problem - I've to override padding-right for v-expansion-panel__header.

What the main problem - I've to override padding-right for v-expansion-panel__header. I had tried to add different classes, but it had no effect. I know that slot isn't a real DOM component, but how to change styles for v-expansion-panel__header?

Secret

Answer 1

Be careful with scoped in styles if you're using frameworks likes Bootstrap or others. If you chose , your styles haven't been overriding classes from framework. so, just remove scoped from style and it will be work.

Seedy

Answer 2

What did the trick for me was adding ::v-deep decaration in front of class declaration.

            /* expansion-panel */
            ::v-deep {
                .v-expansion-panel__header {
                    padding: 0;
                    flex: 0;
                    > span:first-child {
                        margin: 0 10px;
                    }
                }
                /* no expansion-panel icon */
                .v-expansion-panel__header__icon {
                    display: none;
                }
            }

Thrift