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 .

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.

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