Неверное отображение углового меню

Question

Я изучаю угловой, я создал меню материала, которое отображается неправильно. На основе кода, который я добавил, он должен отображаться так же, как это изображение.

Это мой код:

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<button mat-button> Products</button>



<mat-menu #menu="matMenu" overlapTrigger="true">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

У меня также есть некоторые изображения, отображаемые в моем HTML, и я получаю следующий вывод:

Я не получаю никаких ошибок консоли, это мой импорт

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { WelcomeComponent } from './welcome/welcome.component';
import { ProductComponent } from './product/product.component';
import {  BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { 
  MatMenuModule,
  MatButtonModule,
  MatIconModule,
  MatGridListModule,
  MatListModule
} from '@angular/material';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    WelcomeComponent,
    ProductComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatMenuModule,
    MatButtonModule,
    BrowserAnimationsModule,
    MatIconModule,
    MatGridListModule,
    MatListModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Первый вопрос: почему мои опции серые? и второй вопрос: почему мой оверлей не работает должным образом? Спасибо.

Answer 1

Исходя из предоставленного вами кода, ваш HTML-код в порядке, и, похоже, вы включили необходимые модули материалов. Поскольку ваша проблема связана со стилями, я предполагаю, что вы неправильно импортировали стили угловых материалов в свой проект.

Вам просто нужно добавить тему в основной файл ваших приложений styles.css . Включите следующий код в начало вашего файла ** styles.css * и посмотрите, решит ли это вашу проблему.

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';