javascript - 在 mui 的文本字段上对齐文本中心

Question

这是我想要的:

这是我的结果:

我尝试将样式分配给我的输入 Prop ，但没有成功，有什么想法吗？谢谢。

<TextField
    key={'verifyKey_'+i} 
    multiline={false}
    InputProps={{
        textAlign: 'center',
        disableUnderline: true, 
        style: {
            color: 'red', 
            textAlign: 'center'
        }
    }}
    style={{
        height: '50px',
        width: '50px',
        textAlign: 'center',
        justifyContent: 'center'}}/>

Answer 1

使用 flexbox 并将 textAlign: 'center' 替换为 alignItems: 'center':

{
    height: '50px',
    width: '50px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
}