I’m trying to customize a MatChip and cannot get it to appear as desired.
The out of the box MatChip has 3 behaviours I am trying to customize plus add a fourth of my own
- The default color
- The hover color change
- The onClick color change
- Addition of a label below the chip which must appear/behave exactly like the chip it is attached to
What I have tried
I have managed to change the default color (item 1) using [style.background-color] … no success with [class.my-class] as class was applied but the value superceded somewhere else in the style cascade.
I have the label in place (item 4) but it is not behaving like the chip it is attached to because I can’t figure out how to make the label behave like the main chip for the color changes associated with hover and onClick. When you hover or click the chip, the distinct color separation between the label and the chip is visible because the chip is changing color but the label is not. How do I make the label and chip appear/behave the same so it just appears and behaves like a single customized chip.
Stackblitz Demo A list of employees, each represented as a chip, the manager will be marked with a special label
Default state (no line visible between chip and label)
Hover state (ie hover over the chip, not the label … feint line visible between chip and label)
OnClick state (ie click and hold, clear line visible between chip and label)
1
You can use a combination of overriding the default CSS variables and custom classes to achieve the desired effect.
We use .custom-chip-color * selector to configure the new CSS variables you want to use for the chip colors.
We will configure this color for manager section, using CSS class .custom-chip-color .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled):hover .manager-tab.
.custom-chip-color * {
--mdc-chip-elevated-container-color: lightgreen;
--mdc-chip-hover-state-layer-color: green;
}
.custom-chip-color .mat-mdc-chip:hover .mat-mdc-chip-focus-overlay {
background-color: var(--mdc-chip-hover-state-layer-color) !important;
}
.custom-chip-color .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled):hover {
background-color: var(--mdc-chip-hover-state-layer-color) !important;
}
.custom-chip-color .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled):hover .manager-tab {
background-color: var(--mdc-chip-hover-state-layer-color) !important;
}
Stackblitz Demo
3