Angular 9 - 在 CSS 中使用 :host vs !important 来覆盖子 class 中的 CSS 属性

Question

我对托管与 !important 的工作方式有点困惑。

我有 Angular Material 个扩展面板。

  <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-expansion-panel-body 填充，但我能够实现的唯一方法是使用 :host >>>。我尝试使用它 !important 选择器但没有做任何事情。

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

Answer 1

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

Angular 9 - 在 CSS 中使用 :host vs !important 来覆盖子 class 中的 CSS 属性

Angular 9 - Using :host inside CSS vs !important to override CSS properties in the child class

css

angular

angular-material-7