angular - 角材料步进器未显示

Question

我正在使用有角度的材料，所有组件也可以正常工作，但步进器无法正常工作

这是他的 Html 文件垫子滑块正在工作，但垫子水平步进器不工作请看一下图像

    <mat-slider min="1" max="100" step="1" value="1"></mat-slider>
    <mat-horizontal-stepper>
      <mat-step label="Step 1" state="phone">
        <p>Put down your phones.</p>
        <div>
          <button mat-button matStepperNext>Next</button>
        </div>
      </mat-step>
      <mat-step label="Step 2" state="chat">
        <p>Socialize with each other.</p>
        <div>
          <button mat-button matStepperPrevious>Back</button>
          <button mat-button matStepperNext>Next</button>
        </div>
      </mat-step>
      <mat-step label="Step 3">
        <p>You're welcome.</p>
      </mat-step>
    
      <!-- Icon overrides. -->
      <ng-template matStepperIcon="phone">
        <mat-icon>call_end</mat-icon>
      </ng-template>
      <ng-template matStepperIcon="chat">
        <mat-icon>forum</mat-icon>
      </ng-template>
    </mat-horizontal-stepper>

共享模块我正在使用共享模块并导入它

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

import { MatSliderModule } from "@angular/material/slider";
import { MatButtonModule } from "@angular/material/button";
import { MatAutocompleteModule } from "@angular/material/autocomplete";
import { MatFormFieldModule } from "@angular/material/form-field";
import { MatInputModule } from "@angular/material/input";
import { MatButtonToggleModule } from "@angular/material/button-toggle";
import { MatTooltipModule } from "@angular/material/tooltip";
import { MatSidenavModule } from "@angular/material/sidenav";
import { MatIconModule } from "@angular/material/icon";
import { MatCheckboxModule } from "@angular/material/checkbox";
import { MatDialogModule } from "@angular/material/dialog";
import {MatStepperModule} from '@angular/material/stepper';
import {MatTabsModule} from '@angular/material/tabs';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatSliderModule,
    MatButtonModule,
    MatAutocompleteModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonToggleModule,
    MatTooltipModule,
    MatSidenavModule,
    MatCheckboxModule,
    MatIconModule,
    MatDialogModule,
    MatStepperModule,
    MatTabsModule
  ],
  exports: [
    MatSliderModule,
    MatButtonModule,
    MatAutocompleteModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonToggleModule,
    MatTooltipModule,
    MatSidenavModule,
    MatCheckboxModule,
    MatIconModule,
    MatDialogModule,
    MatStepperModule,
    MatTabsModule
  ],
})
export class NgMatModule {}

Css 文件我还导入了字体和图标以及 deeppurple 主题

@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700|Roboto:300,400,500,600,700");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";