Question

在角度对话框中，您可以添加<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>的样式吗？

Answer 1

看起来<mat-dialog-content>是一个元素，您是否尝试过以下内容：

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

Answer 2

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

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

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

Answer 3

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

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

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

此外，这只会定位到该元素。之后，css的特异性规则将适用，因此您还需要添加！important 或创建一个更具体的规则，以覆盖Material的默认值。

Answer 4

有一个官方的指导方针：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，因此它们将始终优先。

更改Angular Material mat-dialog-content样式

4 个答案: