Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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}
/>
like image 777
ton1 Avatar asked May 18 '18 03:05

ton1


People also ask

How do I remove the underline in textfield material UI?

To remove underline from input component with React Material UI, we can set the disableUnderline prop to true . to add the disableUnderline to the Input component. As a result, we wouldn't see the underline of the input now.


1 Answers

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

like image 155
Nadun Avatar answered Oct 18 '22 16:10

Nadun