I am attempting to modify the background color of a wrapper from a different component. I tried using ::ng-deep but it's not functioning correctly. For the mauto component, the background should be a solid block color. For the vgud component, the background should be green.
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