Julien Julien - 3 months ago 16
CSS Question

css stylesheet as a component parameter / have distinct stylesheets for a single component

I have a dropdown menu component that I use in my website and I want to reuse it on the very same website but with a different styling. Is it possible to load a different stylesheet?

Answer Source

As cyrix suggested, I used a class in my component tag :

<dropdown-menu class="blue-theme"></dropdown-menu>

then I could override any of the existing rules in dropdown-menu.component.css with :host() :

span { background-color: white; } /* existing */
:host(.blue-theme) span { background-color: blue; } /* overrided */