使用/ deep / in angular 4 componet.css会导致其他组件使用相同的样式 . 怎么解决？-Java 学习之路

注意：我使用带有angular4而不是scss的css .

更具体，

我的number.component.css有，

/deep/ .mat-drawer-content{ height:100vh; }

其他component.css没有 .mat-drawer-content 类，但它对所有视图都是通用的 . 它由angular-material2生成 .

问题是当我路由到number.component并检查所有其他组件时也得到 height:100vh; 因此它导致我的视图中断 . 现在唯一的解决方案是使用/ deep /删除样式部分并寻找另一种解决方案 .

如果有人知道如何将该风格仅保留给该组件，请告诉我 .

（只有带有 /deep/ 的css会导致此问题）

You can see it here reproduced仅用于演示目的的高度 .

2 回答

1
update

::slotted 现在所有新浏览器都支持，可以与`ViewEncapsulation.ShadowDom一起使用

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

original

我猜你想要的是什么
```
:host /deep/ p{
  color:red;
}
```
或更好
```
:host ::ng-deep p{
  color:red;
}
```
StackBlitz example

如果要根据父级的类来设置子项的样式，则可以使用
```
:host-context(.mat-drawer-content) /deep/ p {
  color:red;
}
```
StackBlitz example
回复于 2024-05-07T06:19:38+08:00
0

与冈特的回答差不多，仍然无法解决 . 为了解决我改变了我设置我的应用程序的方式，所以这不会是一个问题 .

回复于 2024-05-07T06:19:38+08:00