Ngx-chips: Custom theme doesn't work.

[MrBra1nwash]

Hi, awesome component. I am using the latest version of ngx-chips with Angular 5. I tried to make custom theme the same as here , but i doesn't work. Here is my .scss file:
`@import '~ngx-chips/core/styles/core/_core.scss';

$foundation-primary: #1779ba;
$foundation-primary-dark: darken($foundation-primary, 10%);

// this is the container's theme
$foundation-theme: (
container-border-bottom: 1px solid $foundation-primary
);

// this is the tag's theme
$foundation-tag-theme: (
background: $foundation-primary,
background-focused: $foundation-primary-dark,
background-active: $foundation-primary-dark,
background-hover: $foundation-primary-dark,
color: #fff,
color-hover: #fff,
border-radius: 2px
);

// this is the delete icon's theme
$foundation-icon-theme: (
fill: #fff,
fill-focus: #eee,
transition: all 0.35s
);

// apply theme to the container
:ng-deep .ng2-tag-input.foundation-theme {
@include tag-input-theme($foundation-theme);
}

// apply theme to the tags
:ng-deep .ng2-tag-input.foundation-theme tag {
@include tag-theme($foundation-tag-theme);
}

// apply theme to the delete icon
:ng-deep .ng2-tag-input.foundation-theme tag delete-icon {
@include icon-theme($foundation-icon-theme);
}`

Can you update please example in the docs or suggest what am i doing wrong?

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] support request/question

Notice: feature requests will be ignored, submit a PR if you'd like

Current behavior
Custom theme doesn't apply. Tags are the same as in default theme.

Expected behavior
Custom theme should applied.

Minimal reproduction of the problem with instructions (if applicable)

What do you use to build your app?. Please specify the version
Webpack

Angular version:
5.2.7

cls

ngx-chips version:
1.7.9

Browser: Chrome Version 65.0.3325.181

[Gbuomprisco]

Can you try with ::ng-deep? The doc is wrong

[MrBra1nwash]

Thank you! It works! But it works only when i put it in a local styles of components. Is it possible to make it works in global styles, because my project has global styles.

[Gbuomprisco]

as long as you put it in the root component it should work, it still needs to be within angular's compilation scope

[rysilva]

As far as I'm aware, even ::ng-deep is deprecated. I thought the proper way to create a theme would be to add it to a global stylesheet. But if you do it outside angular's compilation scope, then the default theme's styles will override the custom theme styles (for instance, .ng2-tag-input[_ngcontent-c1] will win over .ng2-tag-input.my-theme).

One way to fix it would be to make all the themes global styles, but then in order to use ngx-chips you'd have to import ngx-chips CSS in addition to importing the module.

As a workaround, library consumers can make their theme CSS slightly more specific this way:

tag-input .ng2-tag-input.foundation-theme

This will be more specific than the built-in component rule.