angularangular-materialangular-material2mat-dialog

Angular Material theming / changing border radius

I am using Angular Material with a theme.

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

Now I also want to theme/change the border-radius. Can I do this in theming? I did not find any documentation on this.

I tried theming by using ::ng-deep or directly adressing certain components:

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

But nothing worked.

Solution

  • Demo Did you try to add

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

    inside global styles.css

    or if you just want this dialog then give custom class with panelClass options as example below

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

    and

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

    inside global styles.css