Angular - Component with Native View Encapsulation and Global CSS rules

Question

I have a component with Native View Encapsulation

This means that every CSS rule use the shadow DOM to apply my rule only to the current component. But I have a component that every time I use it, I want to style tag. How can I combine Native View Encapsulation with global CSS rules?

can you clarify your question ? do you want to avoid the use of encapsulation: ViewEncapsulation.None and still be able to style your component with global style ? — HDJEMAI
– HDJEMAI, Commented Apr 25, 2018 at 22:15
you can place the rule in the root styles.css file. personally i use scss @includes. write it once and import it wherever. — Stavm
– Stavm, Commented Feb 8, 2020 at 17:18

Michael C · Accepted Answer · 2020-02-08 16:28:24Z

1

You add the global stylesheet to the styleUrls value in the component so that it's allowed under those circumstances, like so:

styleUrls: ['./products.component.css', '../app.component.css'],

answered Feb 8, 2020 at 16:28

Michael C

3374 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular - Component with Native View Encapsulation and Global CSS rules

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related