我想知道如何覆盖外部组件的封装CSS。
因此,我在项目中使用了material2,并且tabs组件的on属性设置为on tab-body
。是否可以覆盖溢出值?
你可以使用特殊的CSS/deep/
指令。请参阅说明文件
所以,如果你有
app
sub-component
target-component
<div class="target-class">...</div>
你可以将你的应用程序CSS(或更少)放入:
/deep/ .target-class {
width: 20px;
background: #ff0000;
}
显然,你也可以将此css片段放入其中sub-component
。
在
/deep/
已被废弃,支持正在从主流浏览器删除。请参阅Angular文档。因此,我建议您在CSS中编写一个具有相同名称的类,target-class
并使用!important属性标记覆盖的属性。根据经验,@ LppEdd应该使用CSS特定性来覆盖以前的声明,并使用!important属性作为最后的手段(因为它可能已经被使用过)。如果您需要覆盖
!important
,请结合使用CSS特异性和!important
。@AlexKlaus即使(显然)具有更大的专一性也无法正常工作。
从Angular 8开始,
/deep/
无法编译。::ng-deep
仍然有效。我尝试使用!important和CSS专用性,但是在许多情况下,这两种解决方案均无效。