Angular Material Dialog Нежелательный встроенный стиль

Question

Я хотел бы использовать Angular Material Dialog и переопределить некоторые стили, не используя "! Важное" в моем CSS.

Angular Material внедряет cdk-overlay-pane со встроенным стилем следующим образом:

<div id="cdk-overlay-0" class="cdk-overlay-pane" style="max-width:80vw; pointer-events: auto; position: static;">

Можно ли настроить Angular Material так, чтобы он не добавлял эти встроенные стили?

Answer 1

Если вы обнаружите, что с помощью !important нет способа убежать, а другого пути нет, вы можете минимизировать его воздействие с помощью :is(.my-custom-class).

Например:

:is(.my-custom-class) .cdk-overlay-pane{
  min-width: 90vw !important;
}

Тогда в вашем коде управления .my-custom-class с ngClass:

<div [ngClass]="{'my-custom-class': triggerOnDemand}">

, где triggerOnDemand - это переменная, которую вы контролируете в своем компоненте по мере необходимости

Если :isне поддерживается браузером, вы можете использовать :any, но для этого требуется специальная поддержка браузера, например :-webkit-any и т. д.

Более подробную информацию можно найти на сайте MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/:is)

Обратите внимание, что глубокий, хотя и работает, устарел (https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep)

Answer 2

Возможно, это было недоступно, когда вы задали вопрос, но теперь вы можете указать пустое значение для минимальной ширины при открытии диалогового окна, что предотвратит подачу угловым материалом 80vw.

this.dialog.open(DialogComponent, {
  maxWidth: ''
});

Документацию для объекта конфигурации можно найти здесь: https://material.angular.io/components/dialog/api#MatDialogConfig

Я не уверен насчет событий указателя или свойств позиции, но вы можете поиграть с различными вариантами конфигурации, чтобынайти то, что работает для вас.

Answer 3

Я не думаю, что вы можете настроить это, но вы можете настроить его, используя ::ng-deep

Например: (при условии, что вы пишете SCSS)

::ng-deep{
    .cdk-overlay-pane{
        min-width: 90vw;
    }
}

или даже

/deep/ .cdk-overlay-pane{
  min-width: 90vw
}