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 中