无法在Angular 6中更改标签的高度和颜色

Question

我是新的Angular，CSS和Html。 我使用了MatTabsModule（导入{MatTabsModule}来自＆＃39; @ angular / material / tabs＆＃39;;）来创建标签，但我可以调整/改变高度，背景等。简而言之，我是＆＃39;我无法覆盖MatTabsModule类的默认属性。请帮我。 下面是我的CSS和Html代码。我希望不需要Typescript代码。

HTML： -

<mat-card>
 <mat-card-content>
  <mat-tab-group class="tab-group" dynamicHeight>
      <mat-tab *ngFor="let obj of tags">
          <ng-template mat-tab-label>{{ obj.name }}</ng-template>
          <div class="tab-content">
              {{ obj.name }}
          </div>
      </mat-tab>
  </mat-tab-group>
</mat-card-content>

CSS： -

.tab-group {
  border: 1px solid #e8e8e8;
  margin-bottom: 30px;

  .unicorn-dark-theme & {
    border-color: #464646;
  }
}

.tab-content {
  padding: 16px;
}

mat-card{
  padding: 0px;
}

.mat-tab-label .mat-ripple {
  min-width: 0;
  height: 30px;
}

我无法更改这些标签的高度宽度背景颜色.. :(

Answer 1

您无法从css文件访问子组件的样式，因为ViewEncapsulation.Emulated会阻止样式泄漏到应用程序的其余部分（因为它应该，不要更改它）。

如果您使用这样的ng-deep-selector：:host ::ng-deep mat-tab { ... }，您可以覆盖无法以任何其他方式配置的默认材质样式。我这样说是因为从组件中发出css泄漏被认为是一种不好的做法，如果可能的话，你应该使用@Input来传递样式。

顺便说一下，：host就在那里，所以样式只泄漏给这个组件子节点，而不泄漏到应用程序的其余部分

Answer 2

要覆盖角度材质元素的默认样式，您需要在::ng-deep样式中为CSS加上前缀。

这是控制标签高度和宽度的方法

::ng-deep .mat-tab-label{
height: 27px !important;
min-height: 0px!important;
margin: 3px!important;
}