angular - 如何以角度将自定义css添加到库组件？

Question

我正在使用带有材料设计的 Angular 9.0。

在组件中，我想使用<mat-tab-group>数组并将其样式设置为某种颜色和设计。

我知道两种方法：

1. 使用::ng-deep但现已弃用
2. 使用全局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 ? 

标签： angular

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>

样式.scss：

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

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

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

Stackblitz 示例