How to change Material-UI TextField/Select error color via createMuiTheme?

Question

I have a custom input style in my application, used in text fields and selects, and provided by a ThemeProvider. The theme file looks like this:

...
overrides: {
    MuiInput: {
      input: {
        color: '#404040',
        background: 'white',
        fontSize: '14px',
        borderColor: '#c0c0c0',
        borderStyle: 'solid',
        borderWidth: '1.5px',
        borderRadius: '4px',
        paddingLeft: '10px',
        paddingTop: '10px',
        paddingBottom: '10px',
        '&:hover': {
          borderColor: blue[900],
        },
        '&:focus': {
          borderRadius: '4px',
          background: 'white',
          backgroundColor: 'white',
          borderColor: blue[900],
        },
      },
    },
    ...
},

I was able to edit the style on focus and hover, but I can't edit the component when the error property is active. My goal is to display a red border in this case.

Do you have any suggestion on how to this with createMuiTheme and overrides? If it's not possible, I'd also be glad if you have a solution using any other styling option.

Answer 1

TextField uses FormHelperText to display the helper text below the TextField. It is also the error message when the error props is set to true. The error message color by the default is theme.palette.error.main. So this is how you override the error color:

const theme = createMuiTheme({
  palette: {
    error: {
      main: "#ff00ff", // change the error color to pink
    }
  }
});

<ThemeProvider theme={theme}>
  <TextField
    label="Outlined"
    variant="outlined"
    error
    helperText="My error message"
  />
</ThemeProvider>

Live Demo