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

Answer 2

以下对我有用：

const [open, setOpen] = React.useState(false);

const getInputAdornment = () => {
    return (
        <InputAdornment position="start">
            <IconButton onClick={() => setOpen(true)}>
                <BugReportIcon />
            </IconButton>
        </InputAdornment>
    );
};

<DatePicker
    onClose={() => setOpen(false)}
    open={open}
    slots={{ inputAdornment: getInputAdornment }}
/>

Answer 3

添加 Serafim 的出色答案，如果您在应用程序中使用

DatePicker

，则以下是如何在

Theme

对象中设置

<ThemeProvider>

图标的默认值：

1. 扩展 MUI

   Components

   界面以包含

   MuiDatePicker

   。

import '@mui/material/styles';
import '@mui/x-date-pickers/DatePicker/DatePicker';
import type { DatePickerProps } from '@mui/x-date-pickers';
import type { ComponentsOverrides, ComponentsVariants, Theme as MuiTheme } from '@mui/material/styles';
import type { Dayjs } from 'dayjs';

declare module '@mui/material/styles' {

  interface ComponentNameToClassKey {
    MuiDatePicker: 'root' | 'value' | 'unit';
  }

  interface ComponentsPropsList {
    MuiDatePicker: Partial<DatePickerProps<Dayjs>>;
  }

  interface Components {
    MuiDatePicker?: {
      defaultProps?: DatePickerProps<Dayjs>;
      styleOverrides?: Partial<ComponentsOverrides<MuiTheme>['MuiDatePicker']>,
      variants?: ComponentsVariants['MuiDatePicker'];
    }
  }
}

2. 将 MuiDatePicker 添加到

   Theme

   组件中，并更改

   defaultProps

   和

   styleOverrides

   以满足您的需求。

export const base: ThemeOptions = {
  components: {
    MuiDatePicker: {
      defaultProps: {
        slotProps: {
          inputAdornment: {
            position: 'start'
          },
          openPickerButton: {
            color: 'error',
          }
        }
      }
    }
  }    
}

现在

DatePicker

可以在应用程序中使用，无需所有样板。