React + MUI + TextField

Question

I am currently trying to change the default colors of MUI TextField (text and border). I have failed with several approaches as mentioned by the official web site. Among all the solutions I have experimented, the most promising one is this one:

<TextField InputLabelProps={{ style: { color: 'white' } }} ...>

This solution changes the color of the text when unedited. As soon as I edit the text, the color takes it original value. I also tried this solution without any success:

const theme = createTheme({
  components: {
    MuiTextField: {
      defaultProps: {
        style: { color: 'white'}
      }
    }
  }
});

After applying this theme, I had no changes. Did someone experimented the same issue ? Regards.

Answer 1

Can't you just pass className to your TextField component and change styles using css?

Answer 2

You can make use of MUI color palette:

"primary" | "secondary" | "error" | "info" | "success" | "warning"

<TextField
  color="primary"
/>

These colors can be overwritten with a ThemeProvider and be used as the border color onFocus.

const getMuiTheme = () =>
  createTheme({
    palette: {
      primary: {
        main: "#FF0000" // red
      },
      secondary: {
        main: "#00FF00" // green
      }
    }
  });


<ThemeProvider theme={getMuiTheme()}>
  <TextField />
  ...
</ThemeProvider>

You can then deal with the input color by using sx prop inside TextField:

sx={{
  input: {
    color: getMuiTheme().palette.secondary.main
  }
}}

Live Demo