angular - 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,
  )
));

现在我也想主题/更改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选项的自定义类，如下例所示

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

和

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

在全球范围内styles.css