10.2k
2018-10-16 00:30:04
You can use the special css /deep/ instruction. See the documentation
So, if you have
app
sub-component
target-component
<div class="target-class">...</div>
You can put in your apps css (or less):
/deep/ .target-class {
width: 20px;
background: #ff0000;
}
Obviously, you can put this css fragment in sub-component as well.
The
/deep/is deprecated and support is being removed from major browsers. See the Angular documentation. So I would recommend to write in your CSS a class with the same nametarget-classand mark the overridden properties with the !important attribute.@LppEdd, as a rule of thumb, you should use CSS specificity to override previous declarations and use the !important attribute as last resort (as it may have been used already). In cases when you need to override the
!important, use a combination of CSS specificity and!important.@AlexKlaus It doesn't work even with a (apparently) greater specifity.
As of Angular 8,
/deep/fails to compile.::ng-deepstill works. I have tried using !important and CSS Specificity but in many scenarios none of these two solutions work.