Как изменить css вложенного элемента в Angular?

Question

[Виталий]

Возникла необходимость переопределить стиль внутреннего компонента, но Ангуляр изолирует все стили от внешних посягательств. Как решить эту проблему?

Пример: menu.component использет ngx-bootstrap вкладки, требуется установить им фон.

Answer 1

[Sasha Novik]

::ng-deep .tab-class {
  background: red
}

https://angular.io/guide/component-styles#deprecat...

Но даже при наличии этой фичи, это считается плохой практикой и вообще обьявлено deprecated (без срока удаления из апи). Компонент сам должен решать, как ему выглядеть, опираясь на параметры, css-переменные, :host-context. Понятное дело, что третьи либы, если в них не предусмотрен такой параметр, по-другому не застайлишь.

Comments

[Виталий]

Тогда представим себе компонент с определённым функционалом. Начинаем проект с уникальным дизайном, в котором нужно из npm подгрузить компонент.

Вопрос: как ему изменить оформление без необходимости влезать в компонент с целью добавления новой (используемой 1 раз) темы?

Может, есть какой-то способ указать файл стилей при импорте? (не думаю)

[Sasha Novik]

Виталий, сейчас затягивая компонент - мы не можем менять его код(функционал) и шаблон напрямую. Только через параметры и проекцию контента (но это всего-лишь отображение переданного).

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

Тут лично я вижу 2 подхода: (1) параметризация и (2) вынос в общую либу только сложного функционала, а стили-шаблоны уже держать внутри каждого уникального проекта свои.

На практике в сложных проектах рано или поздно (все чаще - рано) приходится отказываться от готовых либ компонентов из-за необычных требований, к которым эти компоненты не готовы.

[Виталий]

Sasha Novik, понял, спасибо. Жаль, что современные технологии по прежнему держатся на костылях и копипасте.

[Sasha Novik]

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