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的组件上有效。

:: ng-deep angular 6样式穿孔ngx-chips标签输入组件

1 个答案: