如何在React Material UI TextField中居中占位符与文本？

嘿，我懂你碰到的这个坑——Material-UI的TextField组件层级比较多，直接加textAlign: 'center'根本穿透不到内部的输入元素，所以得针对性地给各个部分设置样式才行。咱们一步步来搞定它：

核心问题分析 #

TextField的输入区域、前缀装饰（比如你的₹符号）、提示文本（helperText）都是独立的元素，默认各自对齐，得分别给它们设置居中样式才能让所有内容统一居中。

直接生效的代码示例 #

修改你的TextField代码，给三个关键部分加上样式：

<TextField 
  multiline={false} 
  autoFocus 
  placeholder={props.defaultAmt} 
  helperText="Enter amount to pay" 
  margin="normal" 
  // 处理输入内容、placeholder和前缀符号的居中
  InputProps={{ 
    startAdornment: (
      <InputAdornment 
        position="start" 
        style={{ marginLeft: 'auto', marginRight: 'auto' }}
      >
        ₹
      </InputAdornment>
    ),
    inputProps: {
      style: { textAlign: 'center' }
    }
  }} 
  // 处理下方辅助文本的居中
  FormHelperTextProps={{
    style: { textAlign: 'center' }
  }}
/>

各部分样式的作用说明 #

• inputProps.style.textAlign: 'center'：直接作用于内部的<input>元素，让输入的文本和placeholder居中显示。
• InputAdornment.style.margin: '0 auto'：前缀装饰默认左对齐，给它加左右auto margin就能让₹符号跟着输入内容一起居中。
• FormHelperTextProps.style.textAlign: 'center'：把下方的提示文本也改成居中对齐。

更优雅的类名方式（推荐） #

如果你的项目里用了Material-UI的样式方案（v4的makeStyles或v5的styled），可以把样式抽成类名，让代码更整洁：

Material-UI v4 示例 #

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  centeredInput: {
    textAlign: 'center',
  },
  centeredAdornment: {
    margin: '0 auto',
  },
  centeredHelperText: {
    textAlign: 'center',
  },
});

// 在组件内使用
const classes = useStyles();

<TextField 
  multiline={false} 
  autoFocus 
  placeholder={props.defaultAmt} 
  helperText="Enter amount to pay" 
  margin="normal" 
  InputProps={{ 
    startAdornment: (
      <InputAdornment position="start" className={classes.centeredAdornment}>
        ₹
      </InputAdornment>
    ),
    inputProps: {
      className: classes.centeredInput,
    },
  }} 
  FormHelperTextProps={{
    className: classes.centeredHelperText,
  }}
/>

这样设置后，TextField里的所有内容——输入文本、placeholder、₹符号、辅助文本就都会乖乖居中啦！

内容的提问来源于stack exchange，提问作者mevrick