Переопределить стиль внешней библиотеки из нашего компонента angular

Question

Я использую внешний компонент панели, который открывается при нажатии кнопки. Он имеет ширину по умолчанию и другие свойства стиля. Есть ли способ, которым я могу переопределить ширину панели и использовать ее как отзывчивую. Чего я хочу добиться это программно изменить ширину панели в моих компонентах. Например, в моем app.component. html iam с использованием контейнера панели внутри app.component. html

panel-container

Как я могу прикрепить пользовательский класс panel-container class = "panel-width "

In. css .panel-width {Width: 500 px}

Без изменения angular инкапсуляция вида по умолчанию

Answer 1

Вы можете использовать :host::ng-deep для стилизации внешнего компонента.

:host::ng-deep panel-container {
  width: 500px
}

Не рекомендуется с 2017 года, но нет нового способа сделать это, если вы не хотите изменять ViewEncapsulation. Источник: https://angular.io/guide/component-styles#deprecated -глубокий - и-нг-глубокий

Answer 2

Получил решение. Мы можем переопределить то же самое в нашем родительском файле CSS. Не используйте ng deep, поскольку это устарело

Answer 3

Определите стиль внутри вашего компонента, попробуйте передать как

<ExternalPanelComponent [styles]="myStyles">

myStyles = {
  prop: { width: '500px' }
};

Вы не записали имя компонента, так что ... проверьте стиль / s или подобное свойство.