更改 Angular Material mat-dialog-content 样式答案

【问题标题】：Changing Angular Material mat-dialog-content styles更改 Angular Material mat-dialog-content 样式
【发布时间】：2019-08-07 19:17:21
【问题描述】：

在 Angular 对话框中，您可以添加 <mat-dialog-content>，但有什么方法可以设置它的样式吗？

我试过了：

.mat-dialog-content {
    padding: 10px;
}

但这似乎不起作用。不过，这两个工作正常：

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

.mat-dialog-title {
    color: white;
    background-color: #F48043;
    text-align: center;
    width: 100%;
    font-size: 20px;
    padding: 20px 0px !important;
}

知道如何访问<mat-dialog-content> 的样式吗？

【问题讨论】：

标签： css angular angular-material

【解决方案1】：

有官方指南如何做到这一点：https://material.angular.io/guide/customizing-component-styles 例如

例如，要从对话框中删除填充：

// Add this to your global stylesheet after your theme setup
.myapp-no-padding-dialog .mat-dialog-container {   
  padding: 0;
}

this.dialog.open(MyDialogComponent, {panelClass: 'myapp-no-padding-dialog'})

由于您将样式添加到您的全局样式表，最好适当地确定它们的范围。尝试在您的选择器前加上您的应用名称或“自定义”。另请注意默认情况下，mat-dialog-container 的填充是通过特异性为 1 的选择器。自定义样式具有特异性为 2，因此它们将始终优先。

【讨论】：

【解决方案2】：

使用 style.css 或任何全局 CSS 文件中的 CSS。

您必须将其声明为重要，否则材质样式将覆盖它。

.mat-dialog-content {
    padding: 10px !important;
}

【讨论】：

您是否在内联样式文件中尝试此操作？尝试在 style.css 或任何全局 css 文件中使用它。
我是在全局style.css中使用的哎

【解决方案3】：

如果您尝试在组件的 css 文件中设置样式，这是因为 mat-dialog-content 未包含在组件的 主机封装 中。 p>

您可以在类上使用 ::ng-deep 来穿透封装并在组件中设置元素的样式。显然，这是 Angular 团队目前的解决方案。

::ng-deep .mat-dialog-content {
    padding: 10px !important;
}

另外，这将只针对元素。之后，将应用 css 的特异性规则，因此您还需要添加 !important 或创建一个更具体的规则以覆盖 Material 的默认值。

【讨论】：

嗨@Ruklav-Nomad，关于样式泄漏（将相同样式添加到其他垫子对话框）的任何想法？ :host >>> 或 :host ::ng-deep 不起作用