reactjsmaterial-uijss

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

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 .

Solution

  • 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.