如何去除Material UI的DatePicker的边框？

Question

这是日期选择器组件

import React, { Fragment, useState } from "react";
import {
  KeyboardDatePicker,
  MuiPickersUtilsProvider
} from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
import makeStyles from "@material-ui/styles/makeStyles";

const useStyles = makeStyles({
  root: {
    "& .MuiInputBase-root": {
      padding: 0, 
      "& .MuiButtonBase-root": {
        padding: 0,
        paddingLeft: 10
      },
      "& .MuiInputBase-input": {
        padding: 15,
        paddingLeft: 0
      }
    }
  }
});

function InlineDatePickerDemo(props) {
  const [selectedDate, handleDateChange] = useState(new Date());
  const classes = useStyles();

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <KeyboardDatePicker
        className={classes.root}
        autoOk
        variant="inline"
        inputVariant="outlined"
        label="With keyboard"
        format="MM/dd/yyyy"
        value={selectedDate}
       InputAdornmentProps={{ position: "start" }}
        onChange={(date) => handleDateChange(date)}
      />
    </MuiPickersUtilsProvider>
  );
}

export default InlineDatePickerDemo;

从codeSandbox 链接任何人都可以告诉如何从所有侧面删除边框？虽然我设法知道 .MuiInput-underline:before 样式类负责边框宽度，但不知道将该类放在 makeStyles 中的何处。

Answer 1

对于 MUI Datepicker 版本 6 及更高版本，我们需要使用slotProps. 添加下面的示例代码：

<DatePicker
    label="Date of Birth"
    value={account.dob}
    onChange={inputsHandler}
    sx={{ width: "100%" }}
    slotProps={{ textField: { variant: 'standard', } }}  {/** set variant here */}
/>

Answer 2

您只需要稍微编辑一下KeyboardDatePicker元素：

1. 消除inputVariant="outlined"

2. 添加

InputProps={{
  disableUnderline: true
}}

代码沙盒