將自定義 CSS 樣式添加到 Material UI KeyboardDatePicker

Question

我正在使用 Material UI KeyboardDatePicker。

正如您在屏幕截圖中看到的那樣，我想擺脫日期選擇器中的那條黑線。 我怎么做？

這是我的日期選擇器的代碼。

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

Answer 1

您可以在自定義 css 文件中刪除該行。

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

Answer 2

在您的日期 KeyboardDatePicker 或輸入組件的樣式屬性中添加以下屬性：

border: none 

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

Answer 3

你可以簡單地添加這個道具來禁用這個底線：

InputProps={{ disableUnderline: true }}