我需要更改材质 UI 助手文本背景答案

【问题标题】：I need to change material UI helper text background我需要更改材质 UI 助手文本背景
【发布时间】：2021-08-08 23:31:49
【问题描述】：

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

<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

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

您可以使用 FormHelperTextProps 道具为辅助文本道具设置样式或类

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

/>

另外，如果设置 className 对您不起作用（因为它适用于父 div），您可能想学习如何使用 TextField 的 classes 道具或 InputProps 道具

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

【讨论】：

【解决方案2】：

您覆盖了 MuiFormHelperText-root 类的样式：

import React from "react";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";
import { InputAdornment } from "@material-ui/core";
import PersonIcon from "@material-ui/icons/Person";

const useStyles = makeStyles((theme) => ({
  root: {
    "& .MuiTextField-root": {
      margin: theme.spacing(1),
      width: 200
    },
    "& .MuiFormHelperText-root": {
      color: "#000 !important"
    }
  },
  bg: {
    backgroundColor: "#7986cb"
  },
  textfield: {
    backgroundColor: "#fff"
  }
}));

export default function ValidationTextFields() {
  const classes = useStyles();

  return (
    <form className={classes.root} noValidate autoComplete="off">
      <div className={classes.bg}>
        <TextField
          className={classes.textfield}
          placeholder="Email"
          variant="outlined"
          fullWidth
          name="username"
          error
          helperText={"error!"}
          type="text"
          id="outlined-basic"
          InputProps={{
            endAdornment: (
              <InputAdornment position="end">
                <PersonIcon />
              </InputAdornment>
            )
          }}
        />
      </div>
    </form>
  );
}

【讨论】：

如何在主题中应用这个
我编辑了我的代码，我们需要在主题中包含类MuiFormHelperText-root。

【解决方案3】：

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

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

【讨论】：

不，它不正常
@HimanshuRathi 您是否尝试使用 margin:0 删除白色边框并添加一些 paddingLeft？
"& .MuiFormHelperText-root。" -> "& .MuiFormHelperText-root.Mui-error" 用于错误状态和非错误状态。