1

Since Angular Material 15, there have been changes in how to apply styling for Angular Material components. In version 14, the following still worked for me, but not anymore:

::ng-deep .mat-checkbox .mat-checkbox-frame {
  border-color: #fa3131;
}

Does anyone know what would be the new way to change the color in CSS? I saw that MDC is now part of some of the components, but it does not seem to work even if I change .mat to .mat-mdc.

Does anyone know the secret of CSS overrides on the latest Angular Material?

Nipuna Jayawardana
  • 322
  • 2
  • 15
Dusk Childer
  • 59
  • 1
  • 7
  • 1
    I think this issue has been solved early try this link [stackover flow](https://stackoverflow.com/questions/37339735/angular-material-change-checkbox-color) – Sweety SK Jun 15 '23 at 08:45

2 Answers2

0

Thank you @sweety-sk :) That was a very useful link with examples, including Material 15+

Dusk Childer
  • 59
  • 1
  • 7
0
::ng-deep {
.mat-mdc-checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__background {
    background-color: color!important;
    border-color: color!important;
 }
}
FJAL
  • 33
  • 4
  • Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. **Would you kindly [edit] your answer to include additional details for the benefit of the community?** – Jeremy Caney Aug 24 '23 at 00:14