1

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 ?

NcXNaV
  • 1,657
  • 4
  • 14
  • 23
peco123
  • 91
  • 1
  • 9
  • Does this answer your question? [How to style child components from parent component's CSS file?](https://stackoverflow.com/questions/36527605/how-to-style-child-components-from-parent-components-css-file) – J.Loscos Jul 19 '21 at 15:46
  • dont do this, IMO go inside the child component and then style it. In your case child component has its own shadow dom and it is against the principles of shadow dom, style should be defined for the component in a component – Deepak Jha Jul 19 '21 at 15:55
  • No, i tried there the answers but without success – peco123 Jul 19 '21 at 15:56

1 Answers1

2

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

Eliseo
  • 50,109
  • 4
  • 29
  • 67
  • What is - --bgcolor:red ? What is the meaning of --bgcolor ? – peco123 Jul 19 '21 at 15:59
  • it's a variable. Your child use as css like `property:var(--variable_name,valueByDefect)` and you can give value to the variables in the parent, in the example I use as name of the variable "bgcolor" but you can use wahtever (I added a fool stackblitz) – Eliseo Jul 19 '21 at 16:02