mat tab 样式似乎没有正确导入答案

【问题标题】：mat tab style seems to not be imported properlymat tab 样式似乎没有正确导入
【发布时间】：2019-02-07 13:40:26
【问题描述】：

我正在尝试将 mat-tab 正确添加到我的项目中，但似乎垫选项卡没有正确导入或类似的东西。因为好像没有导入mat-tab的完整样式

TS 代码块

import {Component, Input} from '@angular/core';

@Component({
  selector: 'app-code-block',
  templateUrl: './code-block.component.html',
  styleUrls: ['./code-block.component.scss']
})

export class CodeBlockComponent {
  @Input() htmlContent: any;
  @Input() scssContent: any;
  @Input() typescriptContent: any;

  constructor() {
  }

}

HTML 代码块

<mat-tab-group>
  <mat-tab label="HTML">Content 1</mat-tab>
  <mat-tab label="SCSS">Content 2</mat-tab>
  <mat-tab label="Typescript">Content 3</mat-tab>
</mat-tab-group>

app.module.ts（没有上面 ofc 的导入）

@NgModule({
  declarations: [
    AppComponent,
    CodeBlockComponent
  ],
  imports: [
    AppRoutingModule,
    AppMaterialModule,
    BrowserModule,
    FlexLayoutModule,
    BrowserAnimationsModule,
    FormsModule,
  ],
  entryComponents: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

结果：

而不是：

【问题讨论】：

在他们的 style.css 中导入 css 文件的 angular-material 文档的 stackblitz 中找到我的答案 // @import '~@angular/material/prebuilt-themes/deeppurple-amber.css ';

标签： javascript angular angular-material

【解决方案1】：

尝试在您的 app.module.ts 中导入 MatTabsModule

从“@angular/material/tabs”导入 {MatTabsModule}；

并添加导入：

进口：[ MatTabs 模块 ]

在这里查看：https://stackblitz.com/angular/amaplrmgqnp?file=app%2Ftab-group-basic-example.ts

【讨论】：