angular - Angular Material Dialog 不需要的内联样式

Question

我想使用 Angular Material Dialog 并覆盖一些样式，而不在我的 CSS 中使用“！important”。

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 使其不添加这些内联样式？

标签： angularangular-material

Answer 1

当您提出问题时，这可能不可用，但您现在可以在打开对话框时为 min-width 指定一个空白值，这将阻止 Angular Material 注入 80vw。

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

配置对象的文档可以在这里找到：https ://material.angular.io/components/dialog/api#MatDialogConfig

我不确定指针事件或位置属性，但您可以使用各种配置选项来找到适合您的东西。