8

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?

POV
  • 11,293
  • 34
  • 107
  • 201

4 Answers4

15

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)

6

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

Suren Srapyan
  • 66,568
  • 14
  • 114
  • 112
  • If we do this, then we do not have to use !important. – Dacili May 28 '20 at 10:14
  • 1
    @Dacili Not really. You need to look at the strength of the styles also – Suren Srapyan May 28 '20 at 10:15
  • @suren-srapyan Where in `angular.json` are the Material styles imported? I have 1 item in the `styles` property which is my `src/styles.scss` file. – Jack May 31 '20 at 09:36
  • @Jack You need to import them manually, it is not imported automatically – Suren Srapyan May 31 '20 at 09:39
  • I'm using the Angular Material framework, so it is imported automatically (or at least appears to be). Can you point me to where the material css files are imported? – Jack May 31 '20 at 09:40
1

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;
}
Nikhil Paliwal
  • 149
  • 2
  • 5
0

As deep: has been deprecated you can refer below answer too.

https://stackoverflow.com/a/63389535/14097555

Vitron
  • 311
  • 2
  • 6