css - 更改 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>的风格？

Answer 1

有官方指南如何操作:https://material.angular.io/guide/customizing-component-styles 例如

For example, to remove the padding from a dialog:

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

Since you are adding the styles to your global stylesheet, it is good practice to scope them appropriately. Try prefixing your selector with your app name or "custom". Also note that the mat-dialog-container's padding is added by default via a selector with specificity of 1. The customizing styles have a specificity of 2, so they will always take precedence.