Angular 角度材料步进器未正确显示

Angular 角度材料步进器未正确显示,angular,angular-material,angular9,Angular,Angular Material,Angular9,这是我的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="Pi

这是我的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>
但stepper并没有像它应该显示的那样显示。它只是像这样显示直线:- 1,2,3


我使用angular9有什么问题?我还安装了angular材质和angular材质的其他东西。angular材质工作正常。

您似乎缺少材质主题的css导入,请参阅:


你是如何添加材料的?您是否已使用ng添加@angular/material并遵循所有步骤,或手动安装@angular/material软件包?最有可能的情况是,您缺少对主题的css导入。请看这里:@totalynewb thnaku这是我的解决方案。请将此写在答案中。添加较短的版本作为答案。很高兴我能帮忙!
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 { }