使用 mat-tab 时不显示标签

Question

我正在尝试使用 angular material 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>

标签不可见。

我做错了什么？

Answer 1

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

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

使用 mat-tab 时不显示标签

Labels are not displayed while using mat-tab

angular

angular-material

mat-tab