注意：我使用带有angular4而不是scss的css。
更具体地说，
我的数字组件.css有，
/deep/ .mat-drawer-content{
height:100vh;
}
其他组件.css没有 .mat-drawer-content 类，但它对所有视图都是通用的。它由棱角材料2产生。
问题是当我路由到 number.component 并检查所有其他组件也获得 height：100vh 时; 所以它会导致我的视图中断。目前我唯一的解决方案是使用/deep/删除样式部分并寻求另一种解决方案。
如果有人知道如何仅将该样式保留在该组件上，请告诉我。
（只有带有 /deep/ 的 CSS 会导致此问题）
您可以在此处看到仅出于演示目的使用的高度复制了它。
更新
::slotted现在被所有新浏览器支持，并且可以与'ViewEncapsulation.ShadowDom'一起使用
https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
源语言
我想你想要的是
:host /deep/ p{
color:red;
}
或更好
:host ::ng-deep p{
color:red;
}
堆栈闪电战示例
如果要根据父级的类别设置子项样式，可以使用
:host-context(.mat-drawer-content) /deep/ p {
color:red;
}
堆栈闪电战示例
与冈特的答案如此接近，但仍然无法解决。为了解决这个问题，我改变了我的应用程序样式的方式，所以它不会成为问题。