Как сделать компонент TextField в Material UI маленьким

Чтобы изменить размер компонента TextField в Material UI, вы можете сделать несколько вещей. Базовая модификация очевидна, но другие не так просты. По умолчанию компонент TextField довольно большой, и сделать его меньше — обычная задача.

По умолчанию его размер составляет более 1 см в высоту.

<TextField type='text' value='Some prop' />

Первое, что очевидно, это установить значение свойства ‘size’ равным ‘small’.

<TextField type='text' value='Some prop' size='small' > 

Это уже лучше, но иногда надо еще немного меньше. Здесь вы захотите использовать стили CSS, но не добьетесь успеха. Второе решение, которое действительно очень гибкое, — использовать ‘inputProps’. Этот способ позволит вам получить поле меньшего размера.

<TextField type='text' value='Some prop'
		size='small' 
		inputProps={{
		style: {
                    padding: '3px 14px',
                },
              }}/>