Cannot apply text-align to Material UI Input Component, but everything else works

Question

When I inspect, it seems like all the input styles I've created actually go to the outside div Material UI creates that wraps the Input. But the other styles work so I'm not sure what's going on?

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
  },
  inputElement: {
    textAlign : 'center'
  }
}));

const classes = useStyles();

<FormControl className={classes.formControl}>
  {
    labelText &&
    <InputLabel
      className={classes.label}
      htmlFor="component-helper"
    >
      {labelText}
    </InputLabel>
  }
  <Input
    className={classes.input}
    classes={classes.inputElement}  // this does NOT work either
    id={"component-helper"}
    value={text}
    onBlur={handleBlur}
    onChange={handleChange}
    aria-describedby="component-helper-text"
  />
</FormControl>

Answer 1

The main issue with the following code in your question:

  <Input
    className={classes.input}
    classes={classes.inputElement}  // this does NOT work either
    id={"component-helper"}
    value={text}
    onBlur={handleBlur}
    onChange={handleChange}
    aria-describedby="component-helper-text"
  />

is that the classes property should look like in the following:

  <Input
    className={classes.input}
    classes={{input: classes.inputElement}}
    id={"component-helper"}
    value={text}
    onBlur={handleBlur}
    onChange={handleChange}
    aria-describedby="component-helper-text"
  />

Below is a working example. I've used

classes={inputClasses}

in my example, but this is equivalent to

classes={{root: inputClasses.root, input: inputClasses.input}}

import React from "react";
import ReactDOM from "react-dom";
import { makeStyles, FormControl, InputLabel, Input } from "@material-ui/core";

const useInputStyles = makeStyles(theme => ({
  root: {
    color: "black",
    "&:after": {
      borderColor: "black"
    },
    fontSize: 12
  },
  input: {
    textAlign: "center"
  }
}));

function App() {
  const inputClasses = useInputStyles();
  const labelText = "Test Label";
  return (
    <FormControl>
      <InputLabel htmlFor="component-helper">{labelText}</InputLabel>
      <Input
        classes={inputClasses}
        id="component-helper"
        aria-describedby="component-helper-text"
      />
    </FormControl>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);