Material-UI TextField - Изменить цвет ввода и цвет метки - PullRequest
0 голосов
/ 31 марта 2020

TextField

Мой TextField в настоящее время выглядит следующим образом. Я пытался изменить цвет метки (при нажатии на поле) на белый + жирный вес. Кроме того, цвет ввода стал оранжевым с фоном, поэтому я не могу прочитать ввод. Я только пытался изменить фон поля TextField на оранжевый.

Я пытался использовать className = classes.input для цвета ввода, но

 InputLabelProps={{
  className: classes.labelcolor
}}
 InputProps={{
  classes: {
   notchedOutline: classes.notchedOutline
 }
}}

Я пытаюсь объединиться с InputLabelProps здесь .

И это мой код!

const useStyles = makeStyles(theme => ({
  root: {
    height: '100%',
    width: '100%'
  },
  color: {
    backgroundColor: 'black'
  },
  labelcolor: {
    color: 'white'
  },
  notchedOutline: {
    borderWidth: '1px',
    borderColor: 'orange !important',
    backgroundColor: 'orange'
  },
  image: {
    backgroundImage:
      'url(https://media.giphy.com/media/kz76j0UjtPoE4WyhQn/giphy.gif)',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    backgroundPosition: 'center'
  },
  paper: {
    margin: theme.spacing(8, 4),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center'
  },
  avatar: {
    margin: theme.spacing(1)
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1),
    color: 'orange'
  },
  submit: {
    margin: theme.spacing(3, 0, 2)
  }
}));

function Login() {
  const classes = useStyles();


  return (
    <Grid container component='main' className={classes.root}>
      <CssBaseline />
      <Grid item xs={false} sm={4} md={7} className={classes.image} />
      <Grid
        item
        xs={12}
        sm={8}
        md={5}
        component={Paper}
        elevation={6}
        square
        className={classes.color}
      >
        <div className={classes.paper}>
          <form className={classes.form} noValidate>
            <TextField
              InputLabelProps={{
                className: classes.labelcolor
              }}
              InputProps={{
                classes: {
                  notchedOutline: classes.notchedOutline
                }
              }}
            />
            <TextField
              InputLabelProps={{
                className: classes.labelcolor
              }}
              InputProps={{
                classes: {
                  notchedOutline: classes.notchedOutline
                }
              }}
            />
          </form>
        </div>
      </Grid>
    </Grid>
  );
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...