I am trying to overwrite the styling of a child component's color in the parent component. I tried doing multiple things but none of them are properly overwriting the child's original styling.
When I use ::ng-deep for just a single class it works
:host ::ng-deep class1 {
color: black;
}
however when I use ::ng-deep for nested classes:
:host ::ng-deep class1 .class2 .class3 {
color: black;
}
// OR
:host ::ng-deep class1 {
class2 {
class3 {
color: black;
}
}
}
it doesn't overwrite the child's original styling. I also tried using !important and it worked, but I am trying to avoid using that.
Remove :host in front or use the :host in grandchild. If we want to style the host element of the component itself, we need the special :host pseudo-class selector. Would be best to use ::ng-deep as a last resort and would recommend doing that in global style.css in your /src. Before using :ng-deep try to move your css to global style sheet and/or use !important. If you use :ng-deep in some child component, it would also affect everything else (that you may not see at first). Also pay attention where and when your adding dots. Your missing some from css classes.
To simply overwrite some stuff.
.class1 .class2 .class3 {
color: black !important;
}
This is not valid in normal css (yet), in scss you could nest selectors.
.class1 {
.class2 {
.class3 {
color: black !important;
}
}
}
Last resort.
::ng-deep .class1 .class2 .class3 {
color: black;
}
I don't think ::ng-deep is still a thing, you should use ViewEncapsulation.None in your component instead, to disable CSS encapsulation :
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-page',
templateUrl: './page.component.html',
styleUrls: ['./page.component.css'],
encapsulation: ViewEncapsulation.None // <-- Add this here
})