Angular: переопределить CSS другого компонента

Угловые инкапсулирует CSS на уровне компонентов.

Это означает, что даже если у вас есть несколько классов CSS с одним и тем же именем в нескольких компонентах, каждый из этих компонентов будет использовать свой собственный класс, независимо от структуры DOM.

есть времена, когда вы можете изменить стиль дочернего компонента, хотя.

Вы можете сделать это разными способами. Предположим, что compB содержит compA.

:: нг-глубокий

    :host {
        // ... Other styles

        ::ng-deep compA {
            // ... Custom compA styles
        }
    }

Объяснение : селектор ::ng-deep обеспечивает межкомпонентную видимость CSS с учетом его границ (селекторов оболочки). Все, что вы напишете в ::ng-deep compA, будет доступно всем в compA.

ПРЕДУПРЕЖДЕНИЕ : если вы используете ::ng-deep на базовом уровне в таблице стилей компонентов (без оболочки), содержащиеся в ней стили будут распределены по всему приложению вверх и вниз (НЕ только в текущем component), и они загружаются всякий раз, когда загружается компонент. Вот почему его обычно заключают в селектор :host.

Глобальные таблицы стилей

ПРЕДУПРЕЖДЕНИЕ : Если вы используете {{x0}} на базовом уровне в компонентной стайлинг-листе (без обертки), стили, которые он содержит, будет распространен как вверх и вниз по приложению (не только в пределах текущего компонента), и они загружают при когда компонентных нагрузок

Они полезны, когда у вас есть набор стилей, которые нужно перезаписать, которые одинаковы во всем приложении, и вы не хотите слишком сильно связываться с таблицами стилей конкретных компонентов. Не всегда может быть хорошей практикой.

Добавьте новые компонентные таблицы в {{x0}} массив в {{x1}} декоратор.

Это не обязательно относится к вашему случаю, но о нем стоит упомянуть.

    @Component({
        selector: 'app-main',
        templateUrl: './main.component.html',
        styleUrls: ['./main.component.css', '../styles/background.css', '../styles/input.css', '../styles/container.css' /* ... other stylesheets here */]
    })

Это хороший подход, который помогает сохранить общие стили в одном месте, не делая их глобальным. Вы можете добавить любые стили, которые вам нужны для конкретного компонента и разделить их по мере необходимости.