Mui DatePicker v6：如何通过插槽更改默认图标及其位置

Question

我需要这个：

而不是这个：

但现在日期选择器（@mui/x-date-pickers 6.x）已经切换到插槽，并且网络上的示例很少。

Answer 1

Codesandbox：https://codesandbox.io/s/mui-datepicker-change-icon-and-its-position-ylzn4n? file=/demo.tsx

为您的字段添加 startAdornment 的代码：

import { DatePicker } from '@mui/x-date-pickers/DatePicker'
import BugReportIcon from "@mui/icons-material/BugReport";

//...

<DatePicker
  label="mui datapicker"
  slotProps={{
    textField: {
      InputProps: { startAdornment: <BugReportIcon /> }
    }
  }}
/>

更改默认日期选择器图标的代码：

   <DatePicker
     slots={{
       inputAdornment: BugReportIcon
     }}
   />

更改图标及其位置的代码：

<DatePicker
  slots={{
    inputAdornment: BugReportIcon
  }}
  slotProps={{
    inputAdornment: {
      position: 'start'
    }
  }}
/>