Angular 页面底部的“角度材质”菜单“渲染”

我刚刚在项目中添加了一个mat nav菜单，现在该菜单在页面底部呈现，具有以下生成的样式值：

pointer-events: auto;
top: -1688.84px;   <-----??????
right: -140px;

---

当Chrome调试器控制台中显示以下警告时，会出现此UI问题：

找不到角材质核心主题。大多数材料组件 可能无法按预期工作。有关更多信息，请参阅主题化指南：

（参考相关问题）[https://stackoverflow.com/questions/44230852/angular-material-could-not-find-angular-material-core-theme][1] )

适合我的解决方案：

将核心主题CSS添加到styles.scss（建议在 )

@导入“~@angular/material/prebuild themes/deeppurple amber.css”

将核心主题CSS添加到angular.json：

“样式”：[
“/node_modules/@angular/material/prebuild themes/deeppurple amber.css”， “src/styles.scss”]

---

当Chrome调试器控制台中显示以下警告时，会出现此UI问题：

找不到角材质核心主题。大多数材料组件 可能无法按预期工作。有关更多信息，请参阅主题化指南：

（参考相关问题）[https://stackoverflow.com/questions/44230852/angular-material-could-not-find-angular-material-core-theme][1] )

适合我的解决方案：

将核心主题CSS添加到styles.scss（建议在 )

@导入“~@angular/material/prebuild themes/deeppurple amber.css”

将核心主题CSS添加到angular.json：

“样式”：[
“/node_modules/@angular/material/prebuild themes/deeppurple amber.css”， “src/styles.scss”]

可能重复尝试第一个解决方案，添加@import'~@angular/material/prebuilded themes/deeppurple amber.css'；对于全局样式可能的副本，请尝试添加@import'~@angular/material/prebuilded themes/deeppurple amber.css'的第一个解决方案；全球风格

<div class="main nav"  fxHide.lt-md>
  <ul>
    <li value={{i}} class="nav-item" *ngFor="let item of currentNavItems; let i = index">
      <a id="{{item}}" (click)="scroll($event)">{{item}}</a>
    </li>
  </ul>
</div>
<div class="mobile" fxHide.gt-sm>
  <button mat-icon-button [matMenuTriggerFor]="navbar">
    <mat-icon  style="color: #e2d4ce; font-size:64px">menu</mat-icon>
  </button>
  <mat-menu #navbar="matMenu" >
    <div *ngFor="let item of currentNavItems; let i = index">
   <button mat-menu-item id="{{item}}" >{{item}}</button>
    </div>
  </mat-menu>

</div>

import { NavService } from './../nav.service';
import { Router } from '@angular/router';
import { Component, OnInit, Input } from '@angular/core';
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout'
import { MatMenu } from '@angular/material/menu';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
   navbar:MatMenu;
  isHome:boolean
  mobile:boolean;;
  currentNavItems:string[] = ["ABOUT","NEWS","EVENTS","RETREAT","ARTIST OF THE MONTH"];
  constructor(public router:Router, private ns:NavService, public BreakpointObserver: BreakpointObserver) {}

  home: boolean;
  ngOnInit(): void {
    this.BreakpointObserver.observe([
      '(min-width:400px)'
    ]).subscribe((state:BreakpointState) =>{
      if(state.matches){
        this.mobile = true
      }else{
        this.mobile=false;
      }
    })
  }

scroll(event){
    console.log(event.target.id)
    let id = event.target.id.toLowerCase()
    id === "artist of the month" ? id ="artist" : id=id

    const yourElement = document.getElementById(id+"-scroll");
    const y = yourElement.getBoundingClientRect().top + window.pageYOffset;
    window.scrollTo({top: y, behavior: 'smooth'})
  }

}