Change Text field of Material UI from black to white

Question

Hi so this looks simple but i haven't been able to find anything regarding this what i only want is for the following fields to look white:

To be specific the default labels and the border color. To further clarify i did manage to make the input text white itself by passing the class through InputProps. but am stuck with this. Please help me out here.

You have to make use of a ThemeProvider and add a theme object with your customization. https://material-ui.com/customization/theming/ We do not know anything about your implementation since you didn't share your code, so this is out of thin air. — evayly, Aug 21 '20 at 20:08

score 3 · Answer 1 · answered Aug 21 '20 at 21:21

Ciao, to make the border color white you have to:

Define a Theme object in which you have to define a primary color and override the MuiOutlinedInput like this:

   const Theme = {
    palette: {
     primary: {
      contrastText: "#FFFFFF",
      dark: "#FFFFFF",
      main: "#FFFFFF",
      light: "#FFFFFF"
     }
   },
   overrides: {
    MuiOutlinedInput: {
      root: {
        position: "relative",
        "& $notchedOutline": {
          borderColor: "#FFFFFF"
        },
        "&:hover:not($disabled):not($focused):not($error) $notchedOutline": {
          borderColor: "#FFFFFF",
          "@media (hover: none)": {
            borderColor: "#FFFFFF"
          }
        },
        "&$focused $notchedOutline": {
          borderColor: "#FFFFFF",
          borderWidth: 1
        }
      }
     }
    }
   };

(I know, this will override all the MuiOutlinedInputs you will use in your project but I found only this way).

To pass this Theme to the TextField, you have to wrap it into a ThemeProvider and create a mui theme:

import { ThemeProvider, createMuiTheme } from "@material-ui/core/styles";
...
const theme = createMuiTheme(Theme);
...

return (
    <ThemeProvider theme={theme}>
      <div class={classes.root}>
        <TextField />
        ....
     </ThemeProvider>
);

For the text color and the default label, you have to use InputProps and InputLabelProps with a className like:

<TextField
   variant="outlined"
   id="fullName"
   label="Username"
   InputProps={{
     className: classes.input
   }}
   InputLabelProps={{
     className: classes.input
   }}
 />

The css will be:

const useStyles = makeStyles(() => ({
  input: {
    color: "white"
  }
}));

Here a codesandbox example.

score 1 · Answer 2 · answered Aug 21 '20 at 20:24

I think @evayly is right and you should use a theme provider (see his comment above). If you just need a quick hack for a one-off then the follow CSS seems to suffice. However I really don't recommend it for anything that is meant to last.

.MuiOutlinedInput-notchedOutline {
    border-color: white;
}
.MuiFormLabel-root {
    color: white;
}
.MuiInputBase-input {
    color: white;
}

Change Text field of Material UI from black to white

2 Answers2