Почему некоторые CSS классы не могут быть перезаписаны в стиле компонента, а другие могут?

Question

Почему при использовании пакетов я иногда могу перезаписать css классы для некоторых компонентов, но не могу для других случаев?

Например, в пакете материалов я не могу использовать это в моем стиле компонента переопределить класс:

.mat-tab-header{
    background-color: #424242;
}

, но это работает в стиле компонента:

.mat-card {
    background-color: red;
}

Я знаю, что я могу установить стиль в глобальном styles.scss или установить encapsulation: ViewEncapsulation.None. Я просто хочу понять, почему это не работает? В чем может быть разница между этими css классами? Я действительно хотел бы получить какое-то объяснение этому.

Answer 1

Angular добавляет уникальный атрибут для каждого компонента и его теги шаблона.

Вы можете проверить элемент и посмотреть.

Каждый компонент будет иметь уникальный атрибут с префиксом _nghost примерно так: _nghost-{unique-name}. И каждый тег в компоненте будет иметь атрибут с именем _ngcontent-{unique-name}. Класс, который объявлен в файле component.css, будет иметь имя .class[_ngcontent-{unique-name}] вместо .class, и поэтому класс, который объявлен в файле component.css, не может манипулировать тегами, размещенными в других компонентах.

То же самое происходит с элементом mat-card.

Вы можете проверить элемент и увидеть, что mat-card имеет уникальное имя атрибута компонента.