如何在角度8中覆盖自定义组件CSS

Question

我试图覆盖自定义组件选择器的css，但是它不起作用。我尝试:ng-deep失败。我该如何找到解决方案？

app.component.html：

<mycustommcomp></mycustommcomp>

app.component.css：

::ng-deep mycustommcomp{ 
margin:2px;
overflow:unset !important; 
}

mycustomcomp.component.css：

mycustommcomp{ 
margin:8px;
overflow:hidden !important; 
}

演示：https://stackblitz.com/edit/angular-vsdzqs?file=src/app/app.component.css

Answer 1

您无法执行此操作，因为样式无法应用于组件标签。一种可行的方法是用容器（例如div）将内容包装在mycustommcomp中。

mycustommcomp.component.html：

<div class="container">
   <!--Content here-->
</div>

app.component.css：

::ng-deep .container{ 
   margin:2px;
   overflow:unset !important; 
}

mycustomcomp.component.css：

.container{ 
   margin:8px;
   overflow:hidden !important; 
}

不过，请避免这样做，因为:: ng-deep是deprecated。