在组件之间切换时，ng-deep不工作吗？

Question

我有两个组件A，B，在每个组件的css文件中，我有一个ngx-bootstrap datepicker，我需要对其进行自定义(对齐)。

在我有一个组件css文件中

 ::ng-deep .bs-datepicker { 
margin-top:-100px
} 

在B组件css文件中，我有

::ng-deep .bs-datepicker { 
margin-top:-80px
} 

当我转到组件A并检查元素时，它显示了A的css文件，这正是我想要的，但当转到组件B然后返回到组件A时，它在组件A中显示了B的Css文件，因此它在组件A中显示了margin top:80px。

当我从一个组件切换到另一个组件时，如何在这两个组件之间分离样式而不影响另一个组件？

Answer 1

您可以将bs-datepicker包装在容器中，并使用它的名称来捕获

::ng-deep .container-one * .bs-datepicker { 
margin-top:-100px
} 

::ng-deep .container-two *  .bs-datepicker { 
margin-top:-80px
} 

在HTML文件中：

<div class="container-one">
    <input type="text" bsDatePicker>
</div>

<div class="container-two">
    <input type="text" bsDatePicker>
</div>

它们会有不同的样式

我还建议停止使用::ng-deep以防止意外行为(就像您在这种情况下所做的那样)。

上述方法也适用于没有::ng-deep且具有正确angular.json配置的styles.scss文件