Angular Material对话框不需要的内联样式

时间:2018-12-07 03:40:10

标签: angular angular-material

我想使用Angular Material对话框并覆盖某些样式,而不在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,使其不添加这些内联样式?

3 个答案:

答案 0 :(得分:0)

我认为您无法进行配置,但是可以使用::ng-deep

定位

例如:(假设您正在编写SCSS)

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

甚至

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

答案 1 :(得分:0)

如果您发现使用!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

答案 2 :(得分:0)

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

items:

可以在以下位置找到config对象的文档:https://material.angular.io/components/dialog/api#MatDialogConfig

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