角度材料步进器显示不正确 [英] Angular material stepper not showing properly

问题描述

这是我的 Angular Material 步进器的 HTML 代码:

This is my HTML code for Angular Material stepper:

<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>

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

And this is how I imported this in my common import file.

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 { }

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

But stepper is not showing like what it should show.It is just showing straight line like this:

1___2____3.

1_______2________3.

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

I am using Angular 9 what is the issue I also installed Angular Material and other things from Angular Material works fine.

推荐答案

看来你缺少 Material 主题的 css 导入，见:

It seems that you are missing the css imports for the material theme, see:

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

这篇关于角度材料步进器显示不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！