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

Question

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}
/>

Tabitha

After spending few times, I noticed that the underline UI is added into :before pseudo element. But there are no way to override it (I don't find any docs). I've opened a new issue request on their GitHub repo. github.com/dmtrKovalenko/material-ui-pickers/issues/423 – Slyke

Answer 1

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

Intrude

InputProps is a prop of the DatePicker. It is a non recognizable prop, so it is passed down to the TextField component (as stated here). – Rout

Not just DatePicker, even it works on TextField. @Intrude and @Juntae, Thanks a lot for question and answer. – Mainspring

any idea how we can do the same for time picker ? – Sickness

That worked for me. Thank you. Is there a reference in the docs somewhere on how this functionality works? – Availability

Word to the wise, InputProps is case sensitive and capitalized... which is odd among attributes/properties. Pesky invisible fail point. – Berkeleian

Answer 2

It seems that the previous solutions provided in this thread may be deprecated,Here is an updated approach

  <DatePicker
   slotProps={{
    textField: {
     variant: "standard",
      InputProps: { disableUnderline: true },
       },
              }}
            />

Gereron