DatePickerInput integrating to material-ui TextField making the UI similar to TextField

[ajay1008]

Hy,

I have added and integrated the DatePickerInput component, I am using it in a form, of Material-ui's component, so I want to make the DatePickerInput field effect / UI similar to material-ui's TextField; like when a focus is provided over the input a thin border-bottom ripple effect is created., the same I want to achieve it for DatePickerInput.

Presently its showing more of button / normal textfield.

DatePickerInput Component:

<DatePickerInput
     onChange={this.onChange}
     value={this.state.selectedDate}
     className='rc-datepicker-custom'
     startMode="year"
     position="top"
   />

Attached the Screenshot for the same.

Please suggest.

---

Thank you.

[FrancescoCioria]

Hi @ajay1008 ,

To get a material-ui look it should be enough adding some overrides to the default style.

You can do this in a custom .css file and by overriding these css rules: https://github.com/buildo/rc-datepicker/blob/master/src/style.scss#L135-L238