CODEWITHSUNDEEP
angular-material
Shashika Virajh
Shashika Virajh

Reputation: 9487

Angular 4 theme doesn't work

I want to create a theme for my angular 4 app using angular material 2.I created the initial part but it doesn't work. What have I done wrong in this code?

--Theme.scss

@import "~@angular/material/_theming";
@include mat-core();
$app-primary: mat-palette($mat-blue, 600);
$app-accent: mat-palette($mat-green, 600);
$app-warn: mat-palette($mat-red);
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn ); 
@include angular-material-theme($app-theme);

-- Component

<button color="primary" class="mat-raised-button">Pick Up</button>  
<button color="accent" class="mat-raised-button">Drop Off</button>

-- angular-cli.json

"styles": [
  "styles.css",
  "theme.scss"
]

Upvotes: 0

Views: 666

Answers (1)

Edric
Edric

Reputation: 26851

It's a simple fix. Like I said in the comment on your question, just remove the underscore. Easy.

You should also use the mat-raised-button attribute instead of the class (if you're using 2.0.0-beta.11 and above).

<button color="primary" mat-raised-button>Pick Up</button>  
<button color="accent" mat-raised-button>Drop Off</button>

If you're using 2.0.0-beta.10 or below, use the md-raised-button attribute.

<button color="primary" md-raised-button>Pick Up</button>  
<button color="accent" md-raised-button>Drop Off</button>

Upvotes: 2

Related Questions