Angular 2 - sass library to override component css (without disabling encapsulation)

Question

I use ngx-tabset , I could manage to override the css but I had to manualy add the class suffix [_ngcontent-..] to make it work

so I wanted to create a sass library that I could use anywhere, but it does not use the same suffix as the component instance

my overriding style (in file sassLibrary/tabs.scss)

.tabset-style ul.tabset-header li
{
   ...
}

in html page, it looks like

.tabset-style[_ngcontent-c13]   ul.tabset-header[_ngcontent-c13] li[_ngcontent-c13] {
   ...
}

but the tabs component uses this style sheet instead :

.tabset-style[_ngcontent-c14]   ul.tabset-header[_ngcontent-c14] li[_ngcontent-c14]{
   ...
}

how can I make the sass import use the same css suffix than the one used by the tabs component ?

thanks

Here is something you need https://stackoverflow.com/questions/37689673/angular2-styling-issues-caused-by-dom-attributes-ngcontent-vs-nghost — Tan Duong, Apr 27 '18 at 08:39
the whole idea of my post is precisely avoid disabling encapsulation :-) I guess I'll do that unless someone has a better idea..thanks — ninja, Apr 27 '18 at 09:13

score 0 · Answer 1 · answered Apr 27 '18 at 09:17

0

So far, disabling encapsulation would do the trick

ViewEncapsulation:None

but the problem with that is that everytime you want to customize styles, you virtualy have no choice, but to get rid of encapsulation

if anyone knows better...I am all ears

answered Apr 27 '18 at 09:17

ninja

1 Answers1