Angular Material 主题化/更改边框半径

Question

我正在使用带有主题的 Angular Material。

$my-theme-redish: (...
$my-theme-red: (...
$my-theme-celeste: (...

$my-theme-primary: mat-palette($my-theme-redish);
$my-theme-accent:  mat-palette($my-theme-celeste);
$my-theme-warn:    mat-palette($my-theme-red);

$my-app-theme: mat-light-theme((
  color: (
    primary: $my-app-primary,
    accent: $my-app-accent,
    warn: $my-app-warn,
  )
));

现在我也想theme/change了border-radius。我可以在主题中这样做吗？我没有找到任何关于此的文档。

我尝试使用 ::ng-deep 或直接对某些组件进行寻址：

::ng-deep mat-dialog-container {
  border-radius: 20px !important;
}

但没有任何效果。

Answer 1

Demo你试过添加

.mat-dialog-container {
  border-radius: 20px !important;
}

内部全局 styles.css

或者，如果您只想要此对话框，则使用 panelClass 选项自定义 class，如下例

this.dialog.open(dialogComponent, { panelClass: 'custom-container' });

和

.custom-container .mat-dialog-container {
   border-radius: 20px !important;
}

内部全局 styles.css

Angular Material 主题化/更改边框半径

Angular Material theming / changing border radius

angular

angular-material

angular-material2

mat-dialog