Question

我正在将Angular 9.0用于材料设计。

在组件中，我想使用<mat-tab-group>并将数组设置为特定的颜色和设计。

我知道2种方法：

使用::ng-deep，但现在已弃用
使用全局css样式表，但将其应用于所有地方

我只想在该组件包含的选项卡上执行此操作。

  <mat-tab label="myList">
    <div>
      <app-lister-search></app-lister-search> 
    </div>
    <div>
      <app-lister></app-lister> 
    </div>
  </mat-tab>
</mat-tab-group>```

this will generate some component, and I want to apply css to some of them, but they is not possible to add this in the component css as it it outside of the scope.

How can I achieve this ?

Answer 1

没有什么可以阻止您将样式放在“主”样式表中，并且仅将其应用于具有特定类的选项卡组：

模板：

<mat-tab-group class="my-tab-group">
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

styles.scss：

.my-tab-group {
  background-color: orange;

  .mat-tab-label {
    padding: 5em;

    &-active {
      background-color: green;
    }
  }
}

Stackblitz example

如何在角度组件中向库组件添加自定义CSS？

1 个答案: