Material-ui - TextField - Can't change helper text error color

Question

I have a form with a very awkward background color. Would like to change the color of the helper text of the Outlined TextField when it is in an error state but can't seem to override it. It persists the red.

See CodeSandBox .

Tyratyrannical

Answer 1

The problem is caused by CSS specificity (the base style has more specific classname, i.e. MuiFormHelperText-root.Mui-error than the overriding style class). It's recommended to use &$ syntax under this circumstance:

const helperTextStyles = makeStyles(theme => ({
  root: {
    margin: 4,
    '&$error': {
      color: 'white'
    }
  },
  error: {} //<--this is required to make it work
}));

You can also refer to this section for an example and a bit more explanation.

Hyaline

I was forced to end up using !important... like color: 'white !important' – Kenyatta

Answer 2

For some reason, the error text color is generated under the following className: .MuiFormHelperText-root.Mui-error
So overriding error rule alone is not enough.
This will do the trick:

const helperTextStyles = makeStyles(theme => ({
  root: {
    margin: 4,
    color:'black',
  },
  error: {
    "&.MuiFormHelperText-root.Mui-error" :{
      color: theme.palette.common.white,
    },
  },
}));

Code Sandbox

Woodcock

Spent a few good hours trying to figure out how to change helperText color - and what worked for me was this! Cheers! :) – Stesha

Answer 3

It would be better to customize your Mui Theme as follows:

const Theme = {
    components: {
        MuiFormHelperText: {
            styleOverrides: {
                root: {
                    color: "red"
                }
            }
        }
    }
};

See https://mui.com/material-ui/customization/theming/ for more information.

Crossley

Would this not turn all helper text to red. regardless of the error property – Abram

Answer 4

i found one solution to change the color of text field.

<TextField
      error
      id="filled-error-helper-text"
      label="Error"
      defaultValue="Hello World"
      helperText="Incorrect entry."
      variant="filled"
/>

here you can see error which is Boolean, so you might be having validation like YUP, if you do then you pass it like this.

<TextField
  error={!valid}
  id="filled-error-helper-text"
  label="Error"
  defaultValue="Hello World"
  helperText="Incorrect entry."
  variant="filled" 
/>

here i am changing color base on valid keyword.

Bursary

Answer 5

For those who search how to edit the color without theme overrides :

<TextField FormHelperTextProps={{ sx: { color: 'primary.main' } }} />
<TextField FormHelperTextProps={{ sx: { color: 'success.main' } }} />
<TextField FormHelperTextProps={{ sx: { color: 'red' } }} />

Breechcloth