在Mui的文本字段上对齐文本中心

Question

这就是我想要的：

这是我的结果：

我尝试将样式分配给我的输入道具，但是没有运气，有什么想法吗？谢谢。

<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'
}

Answer 2

您正在使用 宽度：“ 50px”

但是你有100％ 宽度：“ 100％”

要使textAlign属性正常工作。.

如果上述方法无效，请再添加一种样式以指定更精确的样式 display：block for your text field。