Components: md-toolbar has not color

[otolol]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When I try add color of toolbar e.x.'warn' it should add class on element and change color of toolbar.

What is the current behavior?

'md-warn' class is added. Inspect look like this:

but color is not changed.

Which versions of Angular, Material, OS, browsers are affected?

Angular 2.1.0, macOs Sierra, Chrome.

Is there anything else we should know?

There is same on primary and accent

[dahaupt]

@otolol Can you provide a plunker, so we can reproduce your issue and investigate further?
Here is the template: http://plnkr.co/edit/o077B6uEiiIgkC0S06dd

[codef0rmer]

@otolol As per the documentation, color property only supports three variations i.e. primary, warn, or accent. If you want to override them, use CSS.

Or it might be that you missed adding the theme.css as <link href="https://unpkg.com/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">

[otolol]

on plunker it works. my code look like this:

<md-toolbar color="primary">
    Home 
</md-toolbar>

and toolbar color is white

[codef0rmer]

@otolol "on plunker it works" is because it has a theme file added. Please add it to your local demo and confirm.

[otolol]

@codef0rmer thank you it works. I saw several demos, but there were not to import theme. Thank you. I'll close this issue.

[johhansantana]

I got the same problem

I added
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'

to my style.scss

I'm using angular-cli for this

Buttons work normally but mat-toolbar doesn't

I have it like this:

<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav class="example-sidenav">
    Jolly good!
  </mat-sidenav>

  <mat-toolbar color="primary">
    <span>Title</span>
    <span style="flex: 1 1 auto;"></span>
    <button type="button" mat-icon-button (click)="sidenav.open()">
      <mat-icon>menu</mat-icon>
    </button>
  </mat-toolbar>


  <router-outlet></router-outlet>

</mat-sidenav-container>

and my buttons that work like this:

<p>
  home works!!
</p>
<button mat-raised-button color="primary">Click here</button>

[lukasholzer]

@johhansantana I have the same problem!

Litte workaround:

 <mat-toolbar class="mat-toolbar mat-primary">
    <span>Title</span>
   ...
  </mat-toolbar>

use the classes mat-toolbar mat-primary then it works.
The definition of mat-toolbar[color="primary"] is missing in the css file!

[Saroj12345]

class="mat-toolbar mat-primary"

No it did not work for me

[dubeyarunkumar]

I had the same issue and the reason I found is this:
In nav.component.ts, we have styleUrls set to ./nav.component.css, and the ./nav.component.css is the issue. If you look in this file you will see that a css class as:
.sidenav .mat-toolbar { background: inherit; }
so if you have your mat-toolbar as a child of an element having class .sidenav then it will take the background of its parent.

so to solve this issue you may do the following:

1. in nav.component.html, add color="primary" in mat-toolbar e.g.
   <mat-toolbar color="primary"> <span>Menu</span> </mat-toolbar>
2. in nav.component.ts, comment/remove styleUrls from @Component decorator

OR

1. in nav.component.css remove the css class
   .sidenav .mat-toolbar { background: inherit; }

I will prefer the removing of the ".sidenav .mat-toolbar" from nav.component.css as it has other CSS classes that are being used for nav-component hence just remove the portion that is causing issue rather than removing the whole component css.

Hope it helps.

Though I would prefer if there will be a way to set a background-color in .sidenav similar to color="Primary" so that we were not to remove the .css class from nav.component.css but I did not find any such way in angular-material documentation for the same. Having said that one may still use custom css or inline styles to provide background-color to .sidenav element!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}