角材料步进器未正确显示答案

【问题标题】：Angular material stepper not showing properly角材料步进器未正确显示
【发布时间】：2020-06-15 07:18:11
【问题描述】：

这是我的 Angular Material stepper 的 HTML 代码：

<mat-horizontal-stepper class="stepper">
    <mat-step label="Basic" state="cloud_download">
      Step 1
      <button mat-button matStepperNext>Next</button>
    </mat-step>
    <mat-step label="Pixels" state="settings">
      <p>Step 2</p>
      <button mat-button matStepperPrevious>Previous</button>
      <button mat-button matStepperNext>Next</button>
    </mat-step>
    <mat-step label="Creative" state="settings">
      <p>Step 3</p>
      <button mat-button matStepperPrevious>Previous</button>
      <button mat-button matStepperNext>Next</button>
    </mat-step>
    <mat-step label="Targeting" state="settings">
      <p>Step 4</p>
      <button mat-button matStepperPrevious>Previous</button>
      <button mat-button matStepperNext>Next</button>
    </mat-step>
    <mat-step label="Review" state="settings">
      <p>Step 5</p>
      <button mat-button matStepperPrevious>Previous</button>
    </mat-step>
  </mat-horizontal-stepper>

这就是我在我的通用导入文件中导入它的方式。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

/*  Added */
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatIconModule} from '@angular/material/icon';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatStepperModule} from '@angular/material/stepper';
import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
/* */


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatToolbarModule,
    MatIconModule,
    MatCheckboxModule,
    MatStepperModule
  ],
  exports:[
    CommonModule,
    MatToolbarModule,
    MatIconModule,
    MatCheckboxModule,
    MatStepperModule
  ],
  providers: [
    {
      provide: STEPPER_GLOBAL_OPTIONS,
      useValue: { displayDefaultIndicatorType: false }
    }]
})
export class CommonImportsModule { }

但是步进器并没有像它应该显示的那样显示。它只是显示这样的直线：

1___2________3.

我正在使用 Angular 9 有什么问题我还安装了 Angular Material 和 Angular Material 中的其他东西工作正常。

【问题讨论】：

你是如何添加材料的？您是否使用了 ng add @angular/material 并遵循了所有步骤，或者手动安装了 @angular/material 包？很可能您缺少对主题的 css 导入。见这里：material.angular.io/guide/theming#using-a-pre-built-theme
@TotallyNewb thnaku 这是我的解决方案。请写在答案中。
添加了较短的版本作为答案。很高兴我能帮上忙！

标签： angular angular-material angular9

【解决方案1】：

您似乎缺少材料主题的 css 导入，请参阅：

https://material.angular.io/guide/theming#using-a-pre-built-theme

【讨论】：