1

I can't seem to get my chip to respond to my color selection and I don't know why.

<md-chip-list>
   <md-chip selected="true" color="primary">Test</md-chip>
</md-chip-list>

It shows up but its always gray. My primary color has always worked for other components. I have tried secondary and accent as well with no change.

Here is what I see in the console looking at the elements: enter image description here

Here are my dependencies in package.json: enter image description here

Hodglem
  • 614
  • 9
  • 17
  • 1
    Might you have conflicting CSS? If you inspect the md-chip with chrome console, there should be background-color set, you can inspect chips in the documentation page for reference: https://material.angular.io/components/chips/overview – Ahmed Musallam Sep 21 '17 at 15:55
  • Just to verify you are trying to change the background color correct? – Erica Grant Sep 21 '17 at 16:33
  • Yes. The background. I looked at the console and I see this class .mat-chip:not(.mat-basic-chip) { background-color: #e0e0e0; color: rgba(0, 0, 0, 0.87); } If I override this in the component CSS it works. But if I use the standard color assignment in HTML the chip is always gray. – Hodglem Sep 21 '17 at 16:37
  • Have you added material theme.? – FAISAL Sep 21 '17 at 16:45
  • @Faisal Yes. As indicated in the question, all of my other components respond to the `color` attribute properly – Hodglem Sep 21 '17 at 16:46
  • @Hodglem if you inspect the dom, does the chip have the class `mat-chip-selected`? – Will Howell Sep 21 '17 at 18:50
  • @WillHowell Class is `class=mat-chip mat-primary`. I will post a picture of what I see in the elements in the op. – Hodglem Sep 21 '17 at 18:57
  • @Hodglem that explains it, the `mat-chip-selected` class provides the color. I don't know why that class wouldn't be getting applied. Also note that `aria-selected` is false in your element too... – Will Howell Sep 21 '17 at 19:24
  • @Hodglem Angular and Material versions? – Will Howell Sep 21 '17 at 19:30
  • @WillHowell Angular 4.4.3 and the url https://github.com/angular/material2-builds.git is set to get the latest Material 2. I'll post a picture of my package.json dependencies in op. – Hodglem Sep 21 '17 at 19:48
  • Looks like a bug! Can you create an issue for it? Use this plunker as a reproduction: http://plnkr.co/edit/fwvENkXwj8lDv36JRLvq?p=preview – Will Howell Sep 21 '17 at 20:04
  • Sure. Will do. Thanks @WillHowell – Hodglem Sep 21 '17 at 20:05

0 Answers0