How can i style my child components from parent?

Question

I have parent and child component. Moment when i use my html in another component i use my css.

I have for example in my parent component

HTML

<div class="chips">
    <p class="tags">Tag 1</p>
</div>

CSS

.chips .tags {
   color:red;
}

and everything works fine. But when i do this with another component

<div class="chips">
    <app-child></app-child>
</div>

HTML FROM CHILD COMPONENT

<p class="tags">Tag 1</p>

then i don't get the red color.

How can i solve this ?

Answer 1

You can put the .css in the styles.css that share all the aplication.

Another option is use ::ng-deep But I don't like so much

The last one is use css variables like this Netanel Basal's article

//in your parent
.chips app-child{
    --bgcolor:red;
}

//in your child
.tags
{
   background-color:var(--bgcolor,pink) //<--use a "pink" by defect
}

a fool example