向 Material UI KeyboardDatePicker 添加自定义 CSS 样式

user14097284
2021-03-03  
2214  
    
3  

我正在使用 Material UI KeyboardDatePicker。 This is how the datepicker currently looks like

我想摆脱日期选择器中的黑线，如您在屏幕截图中所见。我怎么做？

这是我的日期选择器的代码。

<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"
/>
javascript ,  css ,  reactjs ,  material-ui
stack overflow Adding custom CSS styling to Material UI KeyboardDatePicker
原文答案
author avatar
Sato Takeru
2021-03-03
1
     原文

接受的答案

您可以在自定义 css 文件中删除该行。

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

答案:

作者头像
MElate
2021-03-03    0      原文

在您的日期 KeyboardDatePicker 或输入组件的样式属性中添加以下属性：

border: none 

style={{width:"80%", marginTop:"15px", border: none }}
作者头像
Shanza Amin
2022-01-25    0      原文

您可以简单地添加此道具即可禁用此底线：

InputProps={{ disableUnderline: true }}

相关问题

标签