angular 设置组件 css 样式不生效解决方案

小渣渣

clr-datagrid 是一个第三方的数据表格组件，组件生成了一个带 datagrid 样式的 div，我尝试设置 margin-top 无法生效，代码如下：

登录可见。

使用浏览器的开发者模式，增加该css样式是可以的。

解决方案

Angular 提供了一种对未来工具更好兼容性的命令 ::ng-deep 来强制样式允许侵入子组件。

css修改如下：

登录可见。

:host 表示选择器，选择当前的组件。
::ng-deep 可以忽略中间className的嵌套层级关系。直接找到你要修改的className。
不过官方文档上说，ng-deep 在未来的版本中将被放弃，不知道未来会变成什么样的语法。