如何在组件中应用样式

Question

我有一个过滤器组件，我导入到我的应用程序组件有默认的样式，但我希望每个组件有一个不同的样式取决于需要，但当我应用一个类在app.component.scss，它不应用，它总是显示过滤器组件原件，我能做什么?

组件名为

<is-filter class="bgWhite" [type]="'verdicts'" [filterObj]="filterObj" (onFilter)="filter($event)"></is-filter>

我的自定义样式app.component

.bgWhite {
background-color: #fff !important;
}

我的自定义样式过滤器。component

<div class="card-footer pt-0 pb-3 filter-container" id="filter">
...
</div>
SCSS:
card-footer {
padding: 0.75rem 1.25rem;
background-color: rgba(0, 0, 0, 0.03);
border-top: 1px solid rgba(0, 0, 0, 0.125);
}

Answer 1

如果您想要覆盖导入组件的样式，您可以在全局styles.scss中这样做。如果您希望导入的组件具有相同的覆盖样式，那么这是项目中合适的解决方案。

如果您想从导入组件的父组件更改样式，您可以选择具有None值的ViewEncapsulation(如MikeOne在评论中提到的)或您可以使用::ng-deep。最后一个是不赞成的，所以我不会使用它。

viewencapsulation docs, ng-deep docs.