Angular6 Prosemirror编辑器工具栏在Angular 6上不完整

我已将ProseMirror集成到Angular 6中，作为文本编辑器，使用以下指令：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core'; 
import { ProsemirrorModule } from './prosemirror/prosemirror.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatButtonModule, MatCardModule, MatInputModule } from '@angular/material';

@NgModule({
  declarations: [
    AppComponent,
    MyElementComponent
  ],
  imports: [
    BrowserModule,
    ProsemirrorModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatCardModule,
    MatInputModule
  ],
  providers: [],

})
export class AppModule {

  }
  ngDoBootstrap() {

  }
}

并将html用作：

<div appEditor></div>

所有工具都工作正常…但工具栏显示不正确…所有工具都是一个接一个对齐的

不知道如何使其正确显示。需要帮忙吗