Adding custom CSS styling to Material UI KeyboardDatePicker

Admin 1
Viewed 2562

I'm using the Material UI KeyboardDatePicker. This is how the datepicker currently looks like

I want to get rid of that black line which is there in the datepicker as you can see in the screenshot. How do I do that?

This is the code of my datepicker.

<KeyboardDatePicker
    error={this.state.quickRegFormErrors["dob"]||this.state.quickRegFormErrors["form_dob"] }
    helperText={(this.state.quickRegFormErrors["dob"] && "Date Of Birth is Required") || (this.state.quickRegFormErrors["form_dob"]) }
    required 
    id="dob" 
    name="dob" 
    style={{width:"80%", marginTop:"15px"}} 
    clearable
    value={this.state.dob}
    placeholder="dd/mm/yyyy"
    onChange={this.dateOnChange}
    format="dd/MM/yyyy"
    disableFuture= {true}
    autoOk={true}
    className="quick-reg-datepicker"
/>

material-ui reactjs css javascript
3 Answers

You can remove that line in custom css file.

 .quick-reg-datepicker .MuiInput-underline:before {
     content: none !important;
 }
 .quick-reg-datepicker .MuiInput-underline:after{
    content: none !important;
 }
user_148554880

in the styling prop of your date KeyboardDatePicker or input component add the following property:

border: none 

style={{width:"80%", marginTop:"15px", border: none }}
user_147206490

You can simply add this prop to disable this bottom line :

InputProps={{ disableUnderline: true }}
user_162559160
Related