Search code examples
reactjsmaterial-designmaterial-ui

How to disable underline to Material UI's datepicker in React?

How can I disable showing underline to material-ui-pickers?

sandbox https://codesandbox.io/s/l2ykr7kwvz?from-embed

I want to removing underline to its TextField.

I tried

disableUnderline={true}

underlineStyle={{display: 'non'}}

showingUnderline={false}

But nothing works, How can I hide underline?

<DatePicker
    underlineStyle={{display: 'none'}}
    value={selectedDate}
    onChange={this.handleDateChange}
    animateYearScrolling={false}
/>
Solution

  • material-ui date-picker is a text field from the foundation and you can remove the underline simply using input-props

    (DatePicker, TimePicker and DateTimePicker all will work this way)

    <DatePicker
  value={selectedDate}
  InputProps={{
   disableUnderline: true,
  }}
  onChange={this.handleDateChange}
/>

    find the example from here

    hope this will help you