在组件之间切换时，ng-deep 不起作用？

Question

我有 2 个组件 A B ，在每个组件的 css 文件中我有一个 ngx-bootstrap 日期选择器，我需要自定义（对齐）。

在我有的组件 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 以防止出现意外行为（就像您在这种情况下一样）。

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