MUI TextField输入内容无法居中，求有效解决方案

你的问题出在样式作用层级不对——你给InputProps.className设置的样式是作用在TextField的外层容器上，而实际控制输入文本对齐的是内部的<input>元素，所以需要把样式精准作用到这个子元素上。

以下是两种可行的解决方法：

方法一：通过InputProps.classes指定输入框样式 #

直接给内部的input元素绑定样式类：

<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={{
    classes: {
      input: classes.inputCenter,
    },
  }}
/>

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

方法二：用CSS嵌套选择器作用到子元素 #

通过容器的样式类，嵌套选择内部的input元素：

<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.inputContainer }}
/>

const useStyles = makeStyles(() => ({
  inputContainer: {
    '& input': {
      textAlign: 'center',
    },
  },
}));

两种方法都能让输入内容居中显示，选你习惯的方式即可。

内容的提问来源于stack exchange，提问作者Jennifer De Goede