Angular Material theming / changing border radius

Question

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.

mr. pc_coder · Accepted Answer · 2020-12-09T12:33:11.183

7

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

edited Dec 09 '20 at 12:33

answered Dec 09 '20 at 08:29

mr. pc_coder

16,412
3
32
54

1

Can you check this https://stackblitz.com/edit/ang-material-dialog-utxye6?file=src/styles.css – mr. pc_coder Dec 09 '20 at 12:28
My fault, i used `mat-dialog-container` instead of `.mat-dialog-container`. Thanks for the effort, it now works! – Andresch Serj Dec 09 '20 at 15:35
Component DOM structure and CSS classes are considered private implementation details that may change at any time. – Chris Pillen Jun 11 '22 at 10:33

Angular Material theming / changing border radius

1 Answers1