需要为材质设计2的md-dialog-container找到CSS选择器

拼命想在角度2的材质设计中找到md-dialog-container的选择器，但没有成功。需要为材质设计2的md-dialog-container找到CSS选择器

我可以在没有问题的情况下对chrome的f12进行更改，但是在css中使用有效的选择器执行这些更改是个问题。研究/深入/但现在已被弃用。

我试过md-dialog-container {},md-dialog-container.md-dialog-container{}和md-dialog-container.md-dialog-container[role="dialog"]没有成功。

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

来源

2017-02-17 John Stafford

你正在运行到这个问题是由于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 
})

来源

2017-02-17 20:37:03

谢谢杰西。这确实适用于Chrome，Firefox和IE Edge。 '/ deep/md-dialog-container {}' –

我都试过上面提到的每一个选项，但不知何故与Angular2似乎没有工作。我终于通过将这一行添加到我的顶级.css中来工作; '.MAT-对话框容器{填充：0像素重要;}'

来源

2017-04-21 06:08:26

下面是我工作：

设置此对话框组件本身：

封装：ViewEncapsulation.None

在父组件中将panelClass设置为o钢笔例如

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

在CSS的对话单元specifiy的panelClass例如

.my-dialog { 

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

来源

2017-10-20 12:08:27 sarora

很好用，谢谢。如果您在全局CSS文件中设置样式，则无需执行ViewEncapsulation.None步骤 –

对我而言有意义 – sarora

-2

什么工作对我来说是：

在设置panelClass开放如父组件

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

在CSS

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

上述溶液中的好处是，它只会从除去填充特定的对话框不是应用程序中的所有对话框。

来源

2018-01-16 16:34:49 ask007

这可行，但无需重复上述答案 –

需要为材质设计2的md-dialog-container找到CSS选择器

回答

相关问题