我需要这个
而不是这样:
但是现在日期选择器(@mui/x-date-pickers 6.x)已经切换到插槽,Web上很少有这样的例子。
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' } }} />
1条答案
按热度按时间j8yoct9x1#
Codesandbox:https://codesandbox.io/s/mui-datepicker-change-icon-and-its-position-ylzn4n?file=/demo.tsx
为您的字段添加startAdornment的代码:
更改默认日期选择器图标的代码:
更改图标及其位置的代码: