Angular material missing buttons styling

0
votes

Just started to learn Angular material and immediately stuck with buttons styling problem.

I've added MatButtonModule to my app.

Module's code

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { View1Component } from './view1/view1.component';
import { View2Component } from './view2/view2.component';
import { View3Component } from './view3/view3.component';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  declarations: [View1Component, View2Component, View3Component],
  imports: [
    CommonModule, MatButtonModule
  ]
})
export class HeaderModule { }

Added the markup to the template. Template

<p>view2 works!</p>

<button mat-button color="primary">Angular Material Button</button><br/><br>
<button mat-raised-button>Raised button</button><br><br>
<button mat-flat-button>Flat button</button><br><br>
<button mat-stroked-button>Stroked button</button><br><br>
<button mat-icon-button>Icon button</button><br><br>
<button mat-fab>Fab button</button><br><br>
<button mat-mini-fab>Mini Fab button</button><br><br>

But got strange looking result: Rendering result

Checked in different browsers, tried the simmilar code in StackBlitz - and got the same result... but expected the buttons to be styled something like this

Can anyone help me with that? Thanks!

UPDATE

The pink theme was added automatically to "angular.json" with the use of Angular CLI when I installed "@angular/material" library.

...
"styles": [
 "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
 "src/styles.css"
 ],
...

UPDATE 2

I've added the following to the styles.css as was suggested and it works!

@import '@angular/material/prebuilt-themes/indigo-pink.css';

Howerver it is still not clear why the imports in "angular.json" didn't work...

2
angularangular-material

2 Answers

0
votes

It might be possible there's a missing import in styles.css:

@import '@angular/material/prebuilt-themes/indigo-pink.css';
0
votes

I think it might be because of two things.

  1. you are missing a Material theme: https://material.angular.io/guide/theming

you can add one by importing a Material theme to your root SCSS file. styles files. or declaring one in the angular.json file under styles.

  1. Also try adding color attribute to the remaining of the buttons once you have your theme in place.