Material-UI changing the color of inputs floating label

Question

I want to change the color of a floating title for Material-UI's TextField.

As stated in documentation, I pass the object color as floatingLabelStyle:

<TextField floatingLabelStyle={{color: somecolor }} />

But this applies to both states of the label - hovering above the input and on the input while out of focus, when it's supposed to be grey.

I guess that I'm overwriting some kind of CSS transition, but have no idea how to make it work. Any suggestions?

Answer 1

This does the tick

  InputLabelProps={{
    style: { color: '#fff' },
  }}

Answer 2

You should set style of InputLabel:

const styles = {
    floatingLabelFocusStyle: {
        color: "somecolor"
    }
}

<TextField
    label="Test"
    id="test"
    InputLabelProps={{
        className: classes.floatingLabelFocusStyle,
    }}
/>

Answer 3

If you're working from a theme, I found that adding this to the overrides section did it

overrides: {
    MuiInputLabel: {
      root: {
        color: "rgba(255, 255, 255, 0.87)",
      },
    },
  },