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

92dk7w1h  于 2023-06-22  发布在  React
关注(0)|答案(1)|浏览(178)

我需要这个

而不是这样:

但是现在日期选择器(@mui/x-date-pickers 6.x)已经切换到插槽,Web上很少有这样的例子。

j8yoct9x

j8yoct9x1#

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'
    }
  }}
/>

相关问题