0

I have a component inside a component and I don't know how to style it in my css file. I tried a lot of different methods but nothing works.

So it looks like this:

outter.component.html

<div><my-custom-component></my-custom-component></div>

my-custom-component.component.html

and from outter.component.scss I want to add 

i{
  color: red;
}

I want to apply styles to my nested component. I tried :host >>> i {}, ::shadow and different appraoches with them but nothing worked.

Kaspazza
  • 303
  • 1
  • 3
  • 13
  • I'm sure there is a way, but it feels like something you should avoid if possible. – Flink May 29 '19 at 13:34
  • How to avoid it if we want to change style of component in one place? – Kaspazza May 29 '19 at 13:35
  • 1
    https://stackblitz.com/edit/angular-p7shy8 - check this repo, in the app.component.scss you will see on how to manipulate a component from outside.. But as people already said.. normally you should not style it too much from outside – Enes Yalçın May 29 '19 at 13:36
  • 1
    So for example, adding parameter to the component and changing it where we use it is better idea? – Kaspazza May 29 '19 at 13:40
  • @EnesYalçın this is not the same. The OP is not asking to style the component element but rather a child of the component element. e.g. `my-custom-component` has an `i` element which he wants to style. – Mathyn May 29 '19 at 13:40
  • @Flink the answer from this worked. And Yeah it is duplicate because it is what I wanted to know. But I couldn't find that question. Thank You! – Kaspazza May 29 '19 at 13:43
  • 1
    @Kaspazza no problem! – Flink May 29 '19 at 13:45
  • 1
    @Mathyn Uh got things mixed up thanks for letting me know (y) – Enes Yalçın May 29 '19 at 13:51

0 Answers0