-1

I would like to know what is the best way to style child components depending on its parent component. For example, I want to create a list component to be used in a dropdown popup as well as in a toolbar. Depending on which parent component it is in, it is styled differently.

For me there are various ways to solve this. But I don't know the best practice for enterprise applications.

R. Richards
  • 24,603
  • 10
  • 64
  • 64
Manuel Kobloch
  • 37
  • 1
  • 3
  • See this answer: https://stackoverflow.com/questions/36527605/how-to-style-child-components-from-parent-components-css-file?rq=1#answer-36528769 – IceMaur Sep 19 '22 at 06:36
  • Is "ng-deep" really the best practice? It is marked as depricated. I know currently It can be ignored. But what about the way to use ViewEncapsulation.none in the parent component and then have all the styles in the parent component? The child components would then have no styles at all. They basically don't need to, because they don't exist on their own. – Manuel Kobloch Sep 19 '22 at 07:23
  • Your alternative to the deprecated `ng-deep` is a valid approach. Don't use `ViewEncapsulation.None` too much because it might clutter your `(s)css` undesirably. – Youp Bernoulli Sep 19 '22 at 08:17

1 Answers1

-1

I can recommend you two ways first way You could add different css data for your component like this

enter image description here

the folder structure is always them/components/"your component name" and then you need to import your css data into global.scss enter image description here the second way is and I don,t recommend you this that you write all css styles of your components in the page which you use your components inside this enter image description here

Zach Jensz
  • 3,650
  • 5
  • 15
  • 30
Hamed Sadegh
  • 1
  • 1