使用 mat-tab 时不显示标签答案

【问题标题】：Labels are not displayed while using mat-tab使用 mat-tab 时不显示标签
【发布时间】：2021-12-12 09:44:57
【问题描述】：

我正在尝试使用角度材料mat-tab-group 来创建一个简单的选项卡视图。

app.module.ts 和app.component.html 文件-

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {MatToolbarModule} from '@angular/material/toolbar';
import {MatTabsModule} from '@angular/material/tabs';
import { FormsModule } from '@angular/forms';

import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatTabsModule,
    MatProgressSpinnerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<mat-toolbar color="primary">
  <span>Your financial portfolio</span>
</mat-toolbar>

<div>
  <mat-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>
</div>

标签不可见。

我在这里做错了什么？

【问题讨论】：

您已关注文档。因此，为了提供帮助，我需要你创建一个 stackblitz。

标签： angular angular-material mat-tab

【解决方案1】：

你的代码是真的我认为你改变了.mat-tab-label, .mat-tab-link的颜色然后在.css文件中测试这个：

.mat-tab-label, .mat-tab-link {
    color: rgba(0,0,0,.87) !important;
}

【讨论】：