0

Different Style origins all overwritten

I'm working on an Angular project using Angular Material, and I noticed a strange behavior where a font-weight style defined via a CSS variable seems to override both:

  • An inline style with !important

  • An ID-based selector also using !important

The variable is defined somewhere within Angular Material's theming system.

The rule .mdc-list-item__primary-text does not use !important, yet it wins.

I'm assuming this might be related to Angular’s view encapsulation or Shadow DOM behavior, but I'm not sure why or how to properly override it.

Why is the variable-based style able to override both the inline !important and ID-based !important? And how can I reliably override such a style if needed?

Any insights into how Angular Material or CSS variable resolution affects specificity and importance would be really appreciated.

Improve this question
0

1 Answer 1

Reset to default
1

The answer is CSS specificity, looking at your code, you have three cases.

.mdc-list-item__primary-text { ... }

The above line directly styles the main html element, so it would have a specificity around Specificity: (0,1,0) according to my stackblitz.

If you look at the other CSS, they do not style the element .mdc-list-item__primary-text directly but they are inherited CSS from the parent element.

Since the CSS classes and styles are inherited, they loose their specificity.

Specificity of inherited CSS properties

Hence you might be facing this issue.

To fix this all you need to do is, declare a class that directly styles the element .mdc-list-item__primary-text without relying on inheritance of styles from the parent.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.