Невозможно применить выравнивание текста к компоненту ввода пользовательского интерфейса материала, но все остальное работает - PullRequest
0 голосов
/ 11 июля 2019

Когда я проверяю, кажется, что все стили ввода, которые я создал, на самом деле идут к внешнему элементу 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>
...