角度材质主题/更改边框半径

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

演示您是否尝试添加

.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

Answer 2

接受的答案是否回答了有关主题的问题？您应该能够根据 https://material.angular.io/guide/theming#using-a-pre-built-theme

向基础 mixin 提供主题来修改边框半径

底座 设计系统的通用基本样式。这些样式不会根据您配置的颜色、排版或密度而改变，因此每个应用程序只需包含一次它们。这些 mixin 包括结构样式，例如 border-radius、border-width 等。所有组件都有一个基本 mixin，可用于包含其基本样式。 （例如，@include mat.checkbox-base($theme)）