更改Angular Material mat-dialog-content样式

Question

在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>的样式？

- Frank

Answer 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级特异度，因此它们始终具有优先权。

- Stanislav Berkov

Answer 2

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

必须将其声明为important，否则，material样式会覆盖它。

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

- Prachi

---

你是在内联样式文件中尝试这个吗？尝试在 style.css 或任何全局 CSS 文件中使用它。 - Prachi

我是在全局style.css中使用它的。 - Frank

Answer 3

如果您试图从组件的CSS文件中进行样式设置，那是因为mat-dialog-content不包含在组件的host encapsulation中。

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

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

此外，这只会针对该元素生效。之后，CSS 的特异性规则将适用，因此您还需要添加！important或创建一个更具体的规则以覆盖 Material 的默认设置。

- Ruklav-Nomad

---

嗨@Ruklav-Nomad，您对由此导致的样式泄漏（将相同样式添加到其他mat-dialogs）有什么想法吗？ :host >>>或:host ::ng-deep虽然不起作用。 - saberprashant