center input text in a mui TextField

My TextField input wont center. I am using mui TextField to build a form.

Can anyone help, I have been trying a few different things but I can get it to work.

  <TextField
        size="small"
        id="username"
        placeholder="Username"
        type="email"
        value={values.username}
        error={touched.username && !!errors.username}
        helperText={touched.username ? errors.username : ''}
        onChange={handleChange('username')}
        onBlur={handleBlur('username')}
        variant="outlined"
        InputProps={{ className: classes.input }}
      />



const useStyles = makeStyles(() => ({
  input: {
    display: 'flex',
    justifyContent: 'center',
    textAlign: 'center',
  },
  inputCenter: {
    textAlign: 'center',
    color: 'red',
  },
}));

>Solution :

If you are using MUI v5 I think for text alignment you can use sx prop of mui :

<TextField
    InputProps={{
        sx: {
            "& input": {
                textAlign: "center"
            }
        }
    }}
/>

reference : The sx prop

Or if you are using MUI v4 try :

 inputProps={{
        style: { textAlign: "center" }
      }}