Мой 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>
);
}