:: ng-deep Угловой 6-тилетний компонент ввода тега pierce ngx-chips

Question

Возникли серьезные проблемы при попытке изменить простые свойства стиля этого компонента ввода тегов ngx-chips.

Просмотрите документацию, чтобы узнать, что мне нужно сделать: ng-deep для тегов, чтобы изменить стиль https://github.com/gbuomprisco/ngx-chips/blob/master/docs/custom-themes.md

Проблема в том, что их предложение не сработало.

Понял, что правильный способ использования этого метода: :: ng-deep, а не: ng-deep. Но это все равно не сработало.

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

Вот мой стиль scss:

// apply theme to the tags
::ng-deep .ng2-tag-input.bootstrap tag {
   align-items: center !important;
   background: #63c2de !important;
}

Вот теги, связанные с компонентом ngx-chips

      <tag-input formControlName="tags" theme="bootstrap">
        <tag-input-dropdown [autocompleteItems]="uniqueTags" [matchingFn]="matchingFn">
        </tag-input-dropdown>
      </tag-input>

Answer 1

Как вы видите scss вы использовали это ...

::ng-deep .ng2-tag-input.bootstrap tag { ... }

В вашем коде вы не дали ни одного класса. Пожалуйста, проверьте это. Если все правильно, попробуйте и это.

:host ::ng-deep .ng2-tag-input.bootstrap tag { ... } 

Слушайте, вы должны использовать :host, чтобы применить свой CSS.

Примечание: :host будет работать только с тем компонентом, в котором вы использовали :host.