Angular 9 - 在 CSS 中使用 :host 与 ！重要以覆盖子类中的 CSS 属性

Question

我对托管如何工作与！important有点困惑。

我有角度材料扩展面板。

<mat-accordion multi="true">
<mat-expansion-panel [expanded]="true">
<mat-expansion-panel-header>
Title 1
</mat-expansion-panel-header>
<mat-list >
<mat-list-item>
<mat-checkbox class="example-margin">Pepper</mat-checkbox>  
</mat-list-item>
<mat-list-item>
<mat-checkbox class="example-margin">Pepper</mat-checkbox>  
</mat-list-item>
<mat-list-item>
<mat-checkbox class="example-margin">Pepper</mat-checkbox>  
</mat-list-item>
</mat-list>
</mat-expansion-panel>
</mat-accordion>

.CSS

:host >>> .mat-expansion-panel-body{
padding: 0 !important;
}

我想覆盖 .mat-expand-panel-body 填充，但我能够实现这一目标的唯一方法是使用:host >>>.我尝试!important选择器使用它，但没有做任何事情。

我想知道这是否是在 Angular 9 中覆盖 CSS 属性的正确方法，或者是否有更好的方法？

Answer 1

对于像ng-deep，：host等小案例技术都可以。但是，当您的应用程序增长时，最好有一个主题文件，就像一般情况下一样，您可以根据需要覆盖所有材料组件。