javascript - 我需要更改 Material UI 助手文本背景

Question

你可以在下面的图片中看到我的背景颜色像灰色一样当我显示错误时文本字段颜色为白色然后文本字段白色被扩展并且密码错误显示它看起来不太好我需要一个类似文本字段白色的集合在灰色背景中显示下面显示的扩展错误

<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

您可以更改 TextField此处的错误颜色和其他 css 属性:

  textfield: {
    backgroundColor: "#fff",
    "&  .MuiFormHelperText-root.Mui-error": { //<--- here
      backgroundColor: "red",
      margin:0,
      paddingLeft: 10
    },
  },