垫按钮引发的不渲染角度7材质上的主题样式

Question

我无法使垫子按钮升起的按钮具有样式。我正在使用角度7，角度材料。不高兴。

我尝试了不同的导入，使用链接标记并将主题全局导入.scss文件中。

app.component.html

<mat-toolbar style="display: flex;" role="heading">
  <span style="display: flex;">Music with Angular Components</span>
  <button mat-button-raised color="secondary">Logout</button>
</mat-toolbar>

那是按钮。

module.ts

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatToolbarModule } from '@angular/material/toolbar';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { LandingComponent } from './landing/landing.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    LandingComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    MatButtonModule,
    MatCardModule,
    MatToolbarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

和全局角度样式。scss

@import '@angular/material/prebuilt-themes/purple-green.css';

最后是angular.json

 "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/client",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [],
            "es5BrowserSupport": true
          },

我希望看到按钮的样式。

我很困惑。 CSS样式表似乎正在加载，因为在控制台中我可以看到

mat-app-background

，用户界面会反映出来。但是没有按钮样式。

非常感谢任何帮助。