Lech Migdal Lech Migdal - 1 month ago 9
React JSX Question

Components displayed vertically after adding DatePicker

After I've added DatePickers to a simple form, all components got placed vertically, while I would prefer them to be placed horizontally. Is there any parameter that should be set to make this work, or I must play a bit with CSS?

<MuiThemeProvider>
<div>
<TextField hintText="Enter text"/>
<DatePicker hintText="Date from" container="inline" mode="landscape" />
<DatePicker hintText="Date to" container="inline" mode="landscape" />
<IconButton>
<img src="img/ic_search_black_24px.svg"/>
</IconButton>
</div>
</MuiThemeProvider>


Any suggestions are appreciated!

Answer

On each DatePicker, set the style to:

style={{ display: 'inline-block' }}