Я не могу получить стилизованную кнопку с поднятой кнопкой. Я использую угловой 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
и интерфейс отражает это. Но без стайлинга кнопок.
Любая помощь очень ценится.