javascript - I need to change material UI helper text background - Stack Overflow

admin管理员组

文章数量:1289508

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

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

• javascript
• reactjs
• material-ui

Share Improve this question Follow edited May 19, 2021 at 22:06 asked May 19, 2021 at 17:24 user12302978user12302978

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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./api/text-field/

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
    },
  },

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

This can also achieved in css file

 .MuiFormHelperText-root.Mui-error {
    opacity: 1;
    color: rgba(255, 109, 109, 1);
    font-family: 'Open Sans';
    font-size: 10px;
    font-weight: 600;
    font-style: italic;
    letter-spacing: 0px;
    text-align: left;
    /*  background-image: url('../../../assets/error.png');
    background-repeat: no-repeat; 
    padding-left: 20px;
    padding-top: 2px;*/
 }

In jsx file,

 <FormHelperText id="ponent-helper-text">
              {validEmail ? ' ' : errorMessageEmail}
   </FormHelperText>

本文标签： javascriptI need to change material UI helper text backgroundStack Overflow