角度材質工具欄不繼承自角度材質 (Angular material toolbar not inheriting from angular materials)

問題描述

角度材質工具欄不繼承自角度材質 (Angular material toolbar not inheriting from angular materials)

我想在我的應用程序左側集成一個導航欄。但是css中的繼承似乎不起作用。

導航工具欄應該像視頻中一樣繼承角度材料“IF”的樣式我做對了。現在基本上沒有繼承任何東西。我在控制台中沒有錯誤，我確定，我已經導入了機器人等。

我是一個 youtube 視頻，因為我是這個領域的新手：https://www.youtube.com/watch?v=Q6qhzG7mObU 我更新了我的 npm 和 ng。此外，我使用 'ng add @angular/material' 來確保正確配置和導入所有內容。

app.module.ts:

import { AppRoutingModule } from './app‑routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform‑browser/animations';
import { MainNavComponent } from './main‑nav/main‑nav.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule } from '@angular/material';

@NgModule({
  declarations: [
    AppComponent,
    MainNavComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    LayoutModule,
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

styles.css:

參考解法

方法 1:

You just need to add color="primary" in mat‑toolbar of mat‑sidenav. So, in your code :

...
<mat‑sidenav‑container ...>
    <mat‑sidenav ...>
        <mat‑toolbar color="primary">Menu</mat‑toolbar> // Note : color="primary" at this line
    </mat‑sidenav>
</mat‑sidenav‑container>
...

(by Roadman1991、shhdharmen)

參考文件

1. Angular material toolbar not inheriting from angular materials (CC BY‑SA 2.5/3.0/4.0)