Css 更改“角度材质垫”对话框内容样式

在角度对话框中，您可以添加

，但有什么方法可以设置这种样式吗

我试过：

.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;
}

---

知道如何访问

的样式吗？

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

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

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

---

如果您试图从组件的css文件中设置样式，这是因为mat对话框内容不包含在组件的主机封装中

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

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

---

而且，这将只针对元素。之后，css的特殊性规则将适用，因此您还需要添加！重要信息或创建更具体的规则，以覆盖材料的默认值。

有官方指南： 例如

例如，要从对话框中删除填充，请执行以下操作：

因为您正在将样式添加到 全局样式表，适当地确定它们的范围是一个好的实践。 尝试在选择器前面加上应用程序名称或“自定义”。还请注意 默认情况下，mat对话框容器的填充是通过 特异性为1的选择器。自定义样式具有 特异性为2，因此它们将始终优先

---

您正在内联样式文件中尝试此操作吗？尝试在style.css或任何全局css文件中使用它。我在global style.css heyHi@Ruklav Nomad中使用过它，有没有关于由此导致的样式泄漏（将相同的样式添加到其他mat对话框）的想法<代码>：主机>>>或

:host:：ng deep

不工作

// 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'})