класс контента в v-диалоге, не показывающий собственный стиль

Question

У меня есть простой диалог с классом контента.

<v-dialog content-class="foo" v-model="showDialogForProduct">

Если я сделаю какой-нибудь стиль или захочу изменить стиль диалога по умолчанию, он не будет отображаться. В моем css у меня есть:

.foo {
  border-radius: 30px;
}

Или, если я хочу, чтобы изменить какой-то существующий диалог css:

.foo .v-dialog{
  margin: 0px;
}

.foo .v-dialog:not(.v-dialog--fullscreen) {
  max-height: 100%;
}

Есть ли способ изменить стиль или есть что-то не так с классом контента?

Answer 1

Если вы используете однофайловые компоненты (например, App.vue, et c), и вы определяете свой класс foo CSS в теге style компонента, стили не могут быть ограничены .

Это связано с тем, что диалоговое окно удалено из DOM компонента и вставлено непосредственно под компонентом v-app на верхнем уровне приложения. Если вам нужно стилизовать диалог, объявите классы CSS в глобальной таблице стилей или в теге <style> компонента без области действия.

Альтернативой является использование v-dialog '* attach. проп, чтобы сохранить диалог DOM внутри компонента. Вы можете увидеть подробности attach опоры здесь .

Answer 2

V-диалог удаляется из DOM, поэтому нам нужно создать глобальный css файл, поэтому всякий раз, когда v-диалог вызывается обратно в DOM, применяются эти стили.

1) Создайте css файл скажет global.css в папке assets в public.

2) определите ваши стили в файле global.css:

   .v-dialog{
        border: 1px solid gold;
    }

3) Ссылка на файл в индексе. html,

<link re="stylesheet" href="assets//global.css"

Это должно работать нормально.