Выровнять текстовый центр по текстовому полю 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

Вы используете width: '50px'

Но у вас было 100% width: '100%'

Чтобы свойство textAlign работало правильно.

Если вышеприведенное не сработало, добавьте еще один стиль, чтобы указать более точное отображение: блок для вашего текстового поля.

Answer 2

Используя flexbox и замените textAlign: 'center' на alignItems: 'center':

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