程式化 vuetify 组件 v-expansion-panel__header

Question

我有一个带有 Vuetify 和 pug 的 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 或其他框架，请注意样式范围。如果您选择 ，则您的样式尚未覆盖框架中的 类。所以，只需从样式中删除 scoped 即可。

Answer 2

我的诀窍是在 class 声明前添加 ::v-deep 装饰。

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