需要为Material Design 2的md-dialog-container找到CSS Selector

Question

拼命试图在角度2的材质设计中找到md-dialog-container的选择器但没有成功。

我可以毫无问题地对Chrome的f12进行更改，但是使用css中的有效选择器执行这些更改是个问题。研究/深/但现在已弃用。

我已尝试md-dialog-container {}，md-dialog-container.md-dialog-container{}和md-dialog-container.md-dialog-container[role="dialog"]但没有成功。

附上的是我在铬的f12中进行这些更改的图像，没有任何问题。

Answer 1

这对我有用：

1. 在对话框组件本身上设置它：

  

封装：ViewEncapsulation.None

1. 在父组件中，将panelClass设置为打开，例如

this.dialogRef = this.dialog.open(myDialogComponent, {
  panelClass: 'my-dialog'
 });

1. 在对话框组件的css中指定panelClass，例如

.my-dialog {

    .mat-dialog-container {
        padding: 0;
     }
}

Answer 2

您遇到的问题是由于ViewEncapsulation造成的。默认情况下，Angular2使用模拟的Shadow DOM来防止组件中的样式相互影响。您可以选择退出ViewEncapsulation（不推荐），也可以选择use the /deep/ selector。根据提供的链接中的Angular文档，使用Angular的默认模拟Shadow DOM可以使用此选择器。

根据我的理解，Angular有自己的CSS处理器，应该可以让你立即使用这些选择器。我假设他们被翻译了。如果您真的不能使用这些选项，则必须切换到ViewEncapsulation.None。

import {ViewEncapsulation} from '@angular/core'; // and any other imports

@Component({
  selector: 'my-selector',
  templateUrl: './my-selector.component.html',
  styleUrls: ['./my-selector.component.scss'],
  encapsulation: ViewEncapsulation.None
})

Answer 3

我已经尝试了上面提到的每个选项，但不知何故使用Angular 2似乎没有工作。我终于通过在我的CSS中添加这一行来实现它。

.mat-dialog-container {
    padding: 0px !important;
}

Answer 4

对于Angular and Material> 6.x，我可以使用:: ng-deep选择器：

::ng-deep .mat-dialog-container {
  padding: 16px;
}

Answer 5

对我有用的是：

在父组件中设置panelClass打开例如

 this.dialogRef = this.dialog.open(myDialogComponent, {
   panelClass: 'my-dialog'
  });

1. 在css中

  .my-dialog .mat-dialog-container{
     padding:0 !important;
 }

上述解决方案的好处是它只会删除特定对话框中的填充而不是应用程序中的所有对话框。