Material-ui: Datepicker's TextField width 100%

[jgoux]

Hello,
is there a possibility to set the datepicker's textfield at width: 100% or flex: 1 ?

[acornejo]

+1

alternatvely, i can't figure out how to display a datepicker and a dropdown menu in the same row, without having vertical alignment issues (it almost seems as if the two elements belong to two different toolkits).

[tintin1343]

This can be done like this:

<DatePicker hintText="Portrait Dialog" textFieldStyle={{width: '100%'}} />

Looks like this:

Closing this issue for now.

[jatin46]

In DatePicker, how to change the styling of underline under the textField?

[matsad111]

@jatin46 I added a className to the DatePicker, then styled it in css using .datepicker hr with each property needing !important to take effect.

[AdnanShah]

Just use inline style like this style={{ width: 250 }} it worked for me.