material-components-web
material-components-web copied to clipboard
[MDCSelect] Hardcoded color instead of CSS custom properties
In version 14.0 MDCSelect can't be themed just by changing the CSS custom properties.
In fact in material-components-web.css on line 13313 you get the following:
.mdc-menu .mdc-deprecated-list {
color: rgba(0, 0, 0, 0.87);
}
Theming by simply using CSS custom properties seems to be broken that way in quite a few places.
I reckon it should be:
.mdc-menu .mdc-deprecated-list-item__meta {
color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
}
.mdc-menu .mdc-deprecated-list-item__graphic {
color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
}
.mdc-menu .mdc-deprecated-list {
color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
}
Here are a few other broken hardcoded color examples for that component:
.mdc-select--filled:not(.mdc-select--disabled) .mdc-select__anchor {
background-color: whitesmoke;
}
.mdc-select--filled.mdc-select--disabled .mdc-select__anchor {
background-color: #fafafa;
}
.mdc-select--filled:not(.mdc-select--disabled) .mdc-line-ripple::before {
border-bottom-color: rgba(0, 0, 0, 0.42);
}
.mdc-select--filled:not(.mdc-select--disabled):hover .mdc-line-ripple::before {
border-bottom-color: rgba(0, 0, 0, 0.87);
}