0

I am trying to change wrapper background color from another component. I ave tried using ::ng-deep But not working properly. For mauto component background should be like block color. For vgud component background should be like green color.

mauto.component.css:

::ng-deep.wrapper {
  background: red !important;
}

vgud.component.css:

::ng-deep.wrapper {
  background: green !important;
}

app.component.html:

<div class="wrapper">
  <app-mauto></app-mauto> 
</div>

<div class="wrapper"> 
  <app-vgud></app-vgud>
</div>

app.component.css:

.wrapper{
  width:600px;
  height:240px;
  background: black;
}

Demo: https://stackblitz.com/edit/angular-ivy-qdhsyh?file=src%2Fapp%2Fapp.component.html

EMahan K
  • 417
  • 1
  • 19
  • https://stackoverflow.com/questions/68443318/how-can-i-style-my-child-components-from-parent/68443521#68443521 – Eliseo Aug 01 '23 at 21:17

2 Answers2

0

even considering that it is possible

::ng-deep.wrapper:has(app-mauto) {
  background: red !important;
}

it is for sure a bad solution.

correct way would be to put styles in the component, whose template contains the elements that you want to style

.wrapper {
  ...
  &--mauto { // no ng-deep needed
    background: red !important;
  }
}


------ 
<div class="wrapper wrapper--mauto">
  <app-mauto></app-mauto> 
</div>
....
Andrei
  • 10,117
  • 13
  • 21
0

app-mauto and app-vgud components shouldn't be responsible for the outside background. I would move the wrappers inside the components and .wrapper class to the global styles. Like that: https://stackblitz.com/edit/angular-ivy-hzsgah?file=src%2Fstyles.css

alexdefender93
  • 76
  • 5