Выровнять текстовый центр по текстовому полю mui

Question

Выровнять текстовый центр по текстовому полю mui

1

Вот что я хочу:

Вот мой результат:

Я пытаюсь присвоить стиль моим входным реквизитам, но не повезло, никаких идей? Благодарю.

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

DNB5brims 23 окт. 2018, в 10:53

Источник

0

почему вы хотите стилизовать входную опору, вместо этого вы можете использовать селектор атрибутов css для стилизации вашего элемента
Shireesha Parampalli 23 окт. 2018, в 08:42

Теги:

javascript

css

material-ui

2 ответа

Ещё вопросы

почему вы хотите стилизовать входную опору, вместо этого вы можете использовать селектор атрибутов css для стилизации вашего элемента

Kenzk447 · Answer 1 · 2018-10-23T06-33-00.000Z

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

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

sorabh86 · Answer 2 · 2018-10-23T07-36-00.000Z

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

Но у вас было это до 100% ширины: '100%'

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

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