I need to change material UI helper text background

user_12302978 0
Viewed 2516

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>
    )
  }}
/>;

image

CodeSandBox

material-ui reactjs javascript
3 Answers

You can change the TextField error color and other css properties here:

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

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/

user_28220410

You over overide style of class 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>
  );
}
user_114985680
Related