-2

I want to style the child component from the CSS of Parent Component using Angular 6. Please suggest me a way to solve this problem. What we have to do take the css from the Parent component?

<parent>
  <child>
     <p>hello world</p>
  </child>
</parent>

CSS from Parent component:
p { color: red;}
Chandru
  • 29
  • 6

2 Answers2

2

The idea of scoped styling is that you can control the style on the component level and not be affected by parents or siblings style.

So in the usual case you would have the styling at the child component level say 

p { color: red; }

And your parent component wouldn't have to know about this local "style logic".

That said; the ::ng-deep (previously /deep/ DEPRECATED) style option might be of help here.

::ng-deep p {
color: red; 
}
Bjorn 'Bjeaurn' S
  • 3,861
  • 2
  • 18
  • 29
  • This is a good way of doing it too, I was using it to style my Angular Material elements without knowing exactly what it does. But it seems they are going to deprecate it too https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep. – Ala Abid Jun 07 '19 at 10:03
  • Yes this is correct, but for now it'll work. I wonder how they are going to suggest we move away from `::ng-deep` and what alternatives we could use. – Bjorn 'Bjeaurn' S Jun 07 '19 at 10:40
  • 1
    Will be a tough job indeed. I found this answer and its comments helpful https://stackoverflow.com/a/49308475/7179294 – Ala Abid Jun 07 '19 at 10:44
1

You can simply reference the parent CSS from the child component by setting styleUrls to point to your parent component's CSS, something like @Component({ styleurls: ['yourParentCssPath']}) in your child component.

Ala Abid
  • 2,256
  • 23
  • 35