风格化 vuetify 组件 v-expansion-panel__header

问题描述

我有一个带有 Vuetify 和 pug 的 Vuejs 组件.

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

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

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

主要问题是什么 - 我必须为 v-expansion-panel__header 覆盖 padding-right.我曾尝试添加不同的类，但没有效果.我知道插槽不是真正的 DOM 组件，但是如何更改 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?

推荐答案

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

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.

这篇关于风格化 vuetify 组件 v-expansion-panel__header的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！