Блог

У меня есть компонент Vuejs с Vuetify и 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.

В чем основная проблема — мне нужно переопределить заполнение-прямо для v-expansion-panel__header. Я пытался добавить разные классы, но это не дало никакого эффекта. Я знаю, что слот не является реальным компонентом DOM, но как изменить стили для v-expansion-panel__header?

Будьте осторожны с областью видимости в стилях, если вы используете фреймворки, подобные Bootstrap или другие. Если вы выбрали, ваши стили не переопределяли классы из framework. итак, просто удалите scoped из style, и все заработает.

Что помогло мне, так это добавление ::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;
                }
            }