Как добавить пользовательские стили к сторонним компонентам?

Question

Каков рекомендуемый способ настройки стилей для стороннего компонента, который я загрузил через npm?

Например, компонент ng2-tag-input. Я запускаю сборку webpack, которая объединяет все сторонние js-файлы в vendor.js и все сторонние css в vendor.css.

Поскольку это сгенерировано после сборки, я не хочу вносить изменения в vendor.css или фиксировать его.

Скажите, что я хочу добавить свои собственные стили в ng2-tag-input, как это лучше всего сделать? Должен ли я просто переопределять его стили в своем собственном site.css или есть другой способ?

Answer 1

Очевидно, вы не можете изменить его в папке node_modules, поскольку node_modules никогда не следует включать в репозиторий кода и ваши изменения. Итак, есть два варианта:

1. стили заместить собственный CSS (более конкретные правила)
2. не используют НПЕ и включают TS/CSS вручную

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

Answer 2

Вы можете использовать: host >>> .third-party-class.

Используйте селектора/deep/и >>> только с эмулированным инкапсуляцией вида.

источник: https://angular.io/guide/component-styles#deep