I need to change material UI helper text background

Question

you can see in the image below my background color is like gray am text field color is white when I show an error then that text field white color gets extended and the password error shows it's not looking good I need a set like text field white not get extend it error shown below in grey background

<TextField
  className={classes.textField}
  variant="outlined"
  id="outlined-basic"
  fullWidth
  type={values.hidden ? "password" : "text"}
  {...loginForm.getFieldProps("password")}
  name="password"
  error={loginForm.touched.password && loginForm.errors.password}
  helperText={loginForm.touched.password && loginForm.errors.password}
  placeholder="Password"
  InputProps={{
    endAdornment: (
      <InputAdornment position="end">
        <IconButton
          className="icon"
          aria-label="toggle password visibility"
          onClick={handleClickShowPassword}
          onMouseDown={handleMouseDownPassword}
          edge="end"
        >
          {values.hidden ? <VisibilityOff /> : <Visibility />}
        </IconButton>
      </InputAdornment>
    )
  }}
/>;

CodeSandBox

Answer 1

You may use the FormHelperTextProps props to set style or class to the helper text props

<TextField
  ....
  FormHelperTextProps={{ style: { backgroundColor: 'transparent' }}}

/>

Also, if setting className does not work for you (since it works on the parent div) you may want to learn how to use classes props or InputProps props of TextField

https://material-ui.com/api/text-field/