Material UI

To modify the size of the TextField component in Material UI, you can make several things. The basic modification is obvious, but other ones are not so. By default, the component TextField is rather big and it's really a common task to make it less.

By default it's size is more than 1 cm height.

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

The first thing which is obvious is to set property 'size' value equal to 'small'

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

It's already better, but sometimes you need something less.

Here you would like to use CSS styles and you won't get success with it. The second solution, which is really very flexible, is to use 'inputProps'. This way will give you a field with a smaller size.

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