sass - Mat-button-raised 未在 Angular 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>

那是按钮。

模块.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]
})

和全局角度 style.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

用户界面反映了它。但没有按钮样式。

非常感谢任何帮助。

标签： sassangular-materialangular7