样式化vuetify组件v-expansion-panel__header

Question

我有一个带有Vuetify和哈巴狗的Vuejs组件。

.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 }}

主要问题是什么-我必须为v-expansion-panel__header覆盖padding-right。

主要问题是什么-我必须为v-expansion-panel__header覆盖padding-right。 我曾尝试添加不同的类，但没有效果。 我知道插槽不是真正的DOM组件，但是如何更改v-expansion-panel__header的样式？

Answer 1

如果使用的是Bootstrap之类的框架，请谨慎使用样式范围。如果选择，您的样式不会覆盖框架中的类。因此，只需从样式中删除作用域即可。

Answer 2

对我来说，窍门是在类声明之前添加:: v-deep decaration。

            /* 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;
                }
            }