需要为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. 在对话框组件本身上设置它:

encapsulation:ViewEncapsulation.None

2. 在父组件中,将panelClass设置为打开例如

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

3. 在对话框组件的css中指定了panelClass例如

.my-dialog {

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

Answer 2

您遇到的问题是由ViewEncapsulation引起的.默认情况下,Angular2使用模拟的Shadow DOM来防止组件中的样式相互影响.您可以选择退出ViewEncapsulation(不推荐),也可以使用/ 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
})