样式化 vuetify 组件 v-expansion-panel__header答案

【问题标题】：Stylization vuetify component v-expansion-panel__header样式化 vuetify 组件 v-expansion-panel__header
【发布时间】：2019-07-24 20:29:17
【问题描述】：

我有一个带有 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。我曾尝试添加不同的类，但没有效果。我知道 slot 不是真正的 DOM 组件，但是如何更改 v-expansion-panel__header 的样式？

【问题讨论】：

标签： vue.js vuetify.js scss-mixins

【解决方案1】：

如果您使用像 Bootstrap 或其他框架这样的框架，请注意样式中的作用域。如果您选择，则您的样式不会覆盖框架中的类。因此，只需从样式中删除 scoped 即可。

【讨论】：

【解决方案2】：

对我来说，诀窍是在类声明前添加 ::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;
                }
            }

【讨论】：