Unable to theme textfield label/placeholder

[deilv]

What RMWC Version are you using?

1.8.3

What browser(s) and React Version is this bug affecting?

Safari, Firefox, Chrome
React 16.4.1

What build system are you using?

Webpack

What are the steps to reproduce the bug?

Create a Textfield with a label or placeholder and try to change primary color using ThemeProvider.
Example: https://codesandbox.io/s/pp65870mw7

What is the expected behavior?

Changing primary color should (?) also apply to label/placeholder text or at least a separate attribute should be available like there is for changing hint text.

What is the actual behavior?

Label/placeholder does not change.

Any other information you believe would be useful?

I'm not quite sure this is an issue of rmwc, it may as well be a bug of material-components-web or I may be missing something.

[deilv]

This issue is also visible in the textfield examples page. Change the theme from the menu on the top-right and see the issue reproduce by clicking on a textfield. On the same topic, it seems I cannot change the color of the hint text either (using textHintOn*)

[jamesmfriedman]

@deilv This is a well documented issue with MDC. I actually have a PR proposal open to fix it.

material-components/material-components-web#3145
material-components/material-components-web#3066

We'll get around to fixing it upstream. In the meantime, a workaround for you (and anywhere else it is a problem)

Add this to some global css. Make sure it occurs after your MCW css, or you'll have to add an !important or make it more specific.

.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
  color: var(--mdc-theme-primary);
}

[deilv]

Thanks a lot for your reply and workaround:)

[loicnestler]

Hey! Any updates on that issue?

[jamesmfriedman]

Jumping through a bunch or random issues brought me to this one which seems to be the main issue. material-components/material-components-web#4709

The MDC team hears from me often enough about my love of runtime CSS vars. I’d say commenting there or opening an additional issue would show some support.

For my projects I generally just maintain a file of those fixes. I’ve been hesitant to add one directly to MDC since the rules can get kind of crazy to fix it but it’s something I can consider.

[jamesmfriedman]

After many years of dealing with these types issues, I've added a theme fixes file directly to RMWC that takes care of these little issues since I've had a hard time getting them fixed upstream. Will be out with V6.

[jamesmfriedman]

Fixed in 6.0.0.

[b-d-m-p]

@jamesmfriedman Still getting this issue in 6.1.4. Maybe I don't understand the explanation on this page clearly. https://rmwc.io/theme You say to "include both", but I am not sure where or what the theme file is. Can you make it more explicit or give an example?

[kale1d0code]

I can confirm this is still broken in 6.1.4
applying the aforementioned style fix also brakes error colour (is primary colour instead of red) adding :not(.mdc-text-field--invalid) to the selector fixes this.

this issue also affects the Select element
following style fixes this

.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label {
  color: var(--mdc-theme-primary);
}

this does not fix the colour for the drop arrow