How to override material CSS styles?

问题

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?

回答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)

回答2:

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

回答3:

The best practice to override the other file CSS is to make it more specific. And these will work everywhere.

Here is a blog link, to get detail study of CSS specificity: https://medium.com/@kastor012/the-basic-guide-to-css-specificity-b89726c0c0bc

Just like if you want to override you above code i.e.

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

Then, you must add your class within the element or parent to it. and write the specified CSS to override it as:

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

OR

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

来源：https://stackoverflow.com/questions/51932134/how-to-override-material-css-styles

标签

angular

angular-material