"角度材质"对话框不需要的内联样式

Question

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

Angular Material为cdk覆盖窗格注入了这样的内联样式：

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

是否可以配置"角度材质"，使其不添加这些内联样式？

Answer 1

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

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

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

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

Answer 2

我不认为你可以配置它，但你可以使用::ng-deep来定位它

例如：(假设您正在编写SCSS(

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

甚至

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

Answer 3

如果您发现使用!important无法逃脱，也没有其他方法，则可以使用:is(.my-custom-class)将其影响降至最低。

例如：

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

然后在您的代码中用ngClass:控制.my-custom-class

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

如果triggerOnDemand是您根据需要在组件中控制的变量

如果浏览器不支持:is，您可以使用:any，但它需要特定的浏览器支持，如:-webkit-any等。

更多详细信息，请访问MDN网站(https://developer.mozilla.org/en-US/docs/Web/CSS/:is)

请注意，deep虽然有效，但已被弃用(https://angular.io/guide/component-styles#deprecated-深-和ng深(