How to override material CSS styles?

Question

I use Angular Material 2.

There is one CSS style in material CSS:

.mat-radio-button.mat-accent .mat-radio-inner-circle {
  background-color: #fff;
}

I tried to override it in custom CSS file like:

.mat-radio-button.mat-accent .mat-radio-inner-circle {   background-color: red !important; }

Also I tried this:

/deep/ .mat-radio-button.mat-accent .mat-radio-inner-circle {
  background-color: red !important;
}

It does not work, how to do this right and in which place?

Answer 1

You do it in your global style sheet (style.scss), or in any style sheet that is not encapsulated.

To override, take the selector by inspecting the HTML element in your browser, and override the property you want.

If it still fails, you can use !important to force the style to be applied.

Remember to order your style sheet imports in your angular.json file too (thank you @SurenSrapyan for reminding me)

Answer 2

In the angular configuration file you need to import your styles after materialize styles