Angular 全局 css 文件 css 不适用于其他组件

Question

I am using Angular v10, I have a few CSS which are used across the application, so I have written that in our global styles.css file, but the CSS isn't applying to other components, if I write the same CSS in component related CSS it's working fine. On searching I have declared ViewEncapsulation.None in components, it worked well for one component and is still failing to apply for other components. Following is my angular.json file

angular.json

I have never faced this problem with any of the angular projects, is it any issue with the new versions of Angular or is it me doing anything wrong?

Any help is much appreciated!

Answer 1

This might be the case because of CSS specificity.

Simply put: different selectors have different specificity. For example:

If you have the following class declared in your global stylesheet:

.some-class {
  color: red;
}

and in a component you have the following:

button.some-class {
  color: blue;
}

then the property color gets overriden with "blue" because the specificty of the CSS-selectors in the component is higher than in your global stylsheet.

Explanation

To calculate the specificity of a CSS selector you start with 0 and add:

• 1000 (for inline style attributes)
• 100 (for each ID)
• 10 (for each class, attribute, pseudo-class)
• 1 (for each HTML element)

some examples:

button.class-1.class-2 has a specificity of 1 (1 html element) + 20 (2 classes) = 21

#myId.class-1 has a specificity of 100 (1 ID) + 10 (1 class) = 110

So the latter selector overwrites all CSS properties which are also declared in the first one.

For a complete explanation take a look at the corresponding site on w3schools .