Description
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
Using Angular and Material v19, I am trying to change the optgroup text color using the new mat.optgroup-overrides with label-text-color token mixins documented here but it has no effect.
Note: This is not a regression, same issue with v18.
Reproduction
My scss file:
html {
@include mat.optgroup-overrides((
label-text-color: red
));
}
and html:
<mat-form-field>
<mat-label>My label</mat-label>
<mat-select [formControl]="form.controls.myControl">
<mat-optgroup label="Category 1">
<mat-option [value]="1">Value 1</mat-option>
<mat-option [value]="2">Value 2</mat-option>
</mat-optgroup>
<mat-optgroup label="Category 2">
<mat-option [value]="3">Value 3</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
But it has no effect, the color stays to its default value --mat-sys-on-surface.
Inspecting CSS
I can see the red color being applied to the mat-optgroup host element.
But it is overriden in the inner child that contains the text: <span class="mdc-list-item__primary-text">Category 1</span> which has the following CSS:
.mdc-list-item__primary-text {
...
color: var(--mdc-list-list-item-label-text-color, var(--mat-sys-on-surface))
}
Workaround
You could use mat.list-overrides but it will affect every list not just optgroup so I'm overriding the list CSS variable only for optgroups.
mat-optgroup .mat-mdc-optgroup-label {
--mdc-list-list-item-label-text-color: red;
}
Note that this is not recommended by the documentation on "Direct Style Overrides" but that's the only way I know.
After that it works fine:
Expected Behavior
Optgroup text should be red.
Actual Behavior
Optgroup text stays grey.
Environment
- Angular v19.0.0
- Material v19.0.0