Когда я проверяю, кажется, что все стили ввода, которые я создал, на самом деле идут к внешнему элементу Div, который создает пользовательский интерфейс материала, который оборачивает вход. Но другие стили работают, поэтому я не уверен, что происходит?
const useStyles = makeStyles(theme => ({
formControl: {
...
},
label: {
...
},
input: {
color: "black",
'&:after': {
borderColor: 'black',
textAlign: 'center'
},
fontSize: getFontSize(),
display: 'flex',
alignItems: 'center' // this is the only thing that does NOT work
}
}));
const classes = useStyles();
<FormControl className={classes.formControl}>
{
labelText &&
<InputLabel
className={classes.label}
htmlFor="component-helper"
>
{labelText}
</InputLabel>
}
<Input
className={classes.input}
classes={{textAlign: 'center'}} // this does NOT work either
id={"component-helper"}
value={text}
onBlur={handleBlur}
onChange={handleChange}
aria-describedby="component-helper-text"
/>
</FormControl>