Material-UI changing the color of inputs floating label

This does the trick

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

You should set style of InputLabel:

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

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

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)",
      },
    },
  },

You should use floatingLabelFocusStyle:

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

<TextField floatingLabelFocusStyle={styles.floatingLabelFocusStyle} />

You can use

root: {
  '& .MuiFormLabel-root.Mui-disabled': {
    color: 'red',
  },
},

 <TextField
   label={label}
   disabled={true}
   className={classes.root}
 />

You can do that by changing the InputLabel‘s color inside the TextField. TextField provides a InputLabelProps prop to help you manipulate the label’s properties. If you only want to change the color when it is shrinked (floating), you can refer to the inputLabelClasses.shrink class name. See the example below:

import TextField from "@mui/material/TextField";
import { inputLabelClasses } from "@mui/material/InputLabel";

<TextField
  label="Outlined secondary"
  InputLabelProps={{
    sx: {
      // set the color of the label when not shrinked
      color: "red",
      [`&.${inputLabelClasses.shrink}`]: {
        // set the color of the label when shrinked (usually when the TextField is focused)
        color: "orange"
      }
    }
  }}
/>

Live Demo

There are two ways by which you can change the label color on focus event :

1. Using makeStyle Function :
   Link to the sandbox : https://codesandbox.io/s/material-demo-xnz77
   Explanation: To make things more abstract i have used style.js in which i have used
   JSS which creates classes using makestyle function. After that i have used Input
   props:

   InputLabelProps={{
classes: {
root: classes.inputLabel,
focused: "focused"
}
}}

   and thus creating an textfield which when focussed change the label color.

2. Using withStyles :

   Reference 1: https://codesandbox.io/s/3vzr41zmjm

   Reference 2: https://github.com/mui-org/material-ui/issues/13840

   I havent used the exact code from the references but yes i have modified it a bit to fit my requirements.

   Here is a Link to sandBox https://codesandbox.io/s/material-demo-s9g4t

This is a bug, please raise it with them.

Explanation

Just went through their source code. Initially the label color is set as hintColor.

const styles = {
  ...
  floatingLabel: {
    color: hintColor,
    pointerEvents: 'none',
  },
  ...
}

On focus, the color of the label is changed to focusColor from muiTheme

if (state.isFocused) {
  styles.floatingLabel.color = focusColor;
}

And then overridden if any value is given

<TextFieldLabel
  style={Object.assign(styles.floatingLabel, this.props.floatingLabelStyle)}
  ...
>

So your property is always overridden and thus you see the same color always.

You can use

import {FormControl, Input, InputLabel} from "@material-ui/core";

 <FormControl>
   <InputLabel style={{ color: '#fff' }}>Votre Nom et Prénom</InputLabel>
   <Input value={Nom} onChange={event => setNom(event.target.value)} />
 </FormControl>

Create a theme object and pass it to the mui component whose color you want to change

const theme = createTheme({
  palette: {
    primary: {
      main: "#f1d045",
    },
    secondary: {
      main: "#f1d045",
    },
  },
  textField: {
    color: "#f1d045",
  },
});

then pass this theme to the component you want to change by the help of ThemeProvider

<ThemeProvider theme = {theme}>
    <TextField
    id="outlined-search"
    label="Search field"
    type="search"
    />
</ThemeProvider>

while doing all this you get an error like 'ThemeProvider' is not defined react/jsx-no-undef

so to correct this you just have to import this in your jsx file

import {ThemeProvider, createTheme } from "@mui/material/styles";

For those using themes with v5 Material UI:

MuiInputLabel: {
     styleOverrides: {
          root: {
               color: "white",
          },
          shrink: {
               color: "white",
          }
     }
}

This will style both the InputLabel inside a TextField and a floating InputLabel. If you just want to change the floating then remove the root attributes.

Note: You also need the boolean prop for TextField shrink to be true

For more CSS rule names check out the MUI documentation for this.

According v5 Material UI documentation examples https://mui.com/material-ui/react-text-field/#customization
TextField colors can be customized with styled() utility

import { TextField } from '@mui/material';
import { styled } from '@mui/material/styles';

const CssTextField = styled(TextField)({
  '& label.Mui-focused': {
      color: 'green',
  },
  '& label.Mui-root': {
      color: 'blue',
  },
});

<CssTextField label="Custom CSS"/>