无法在 MUI DatePicker 中使用复选图标可视化徽章

Question

我在这个项目中使用 MUI Date Picker 和 React.js。

我遇到的问题是，我无法可视化应根据当前为虚拟数组的突出显示日期呈现为徽章的 checkIcon。

我无法在文档中找到任何具体信息，并尝试遵循视​​频解释，但似乎没有任何效果。

import { useState } from 'react';
import TextField from '@mui/material/TextField';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
import Badge from '@mui/material/Badge';
import { PickersDay } from '@mui/x-date-pickers/PickersDay';
import CheckIcon from '@mui/icons-material/Check';

export const Calendar = () => {
  const [value, setValue] = useState(new Date());
  const [highlightedDays, setHighlightedDays] = useState([1, 2, 13]);

  return (
   
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <StaticDatePicker
        variant='static'
        orientation='portrait'
        value={value}
        disableFuture
        onChange={(newValue) => setValue(newValue)}
        renderInput={(params) => {
          <TextField {...params} />;
        }}
        renderDay={(day, _value, DayComponentProps) => {
          const isSelected =
            !DayComponentProps.outsideCurrentMonth &&
            highlightedDays.indexOf(day.getDate()) >= 0;

          return (
            <Badge
              key={day.toString()}
              overlap='circular'
              badgeContent={isSelected ? <CheckIcon color='red' /> : undefined}
            >
              <PickersDay {...DayComponentProps} />
            </Badge>
          )
        }}
      />
    </LocalizationProvider>
  );
};

Answer 1

我检查了MUI 文档，不知何故，StaticDatePicker 组件中没有任何属性“renderDay”、“renderInput”或“variant”。

相反，您应该使用 slot 属性自定义 StaticDatePicker。您可以在此处查看有关自定义选项的更多信息。

我重构了您的代码以使用 slot 属性，如下所示：

import { useState } from "react";
import {
  LocalizationProvider,
  PickersDay,
  StaticDatePicker,
} from "@mui/x-date-pickers";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { Badge } from "@mui/material";
import CheckIcon from '@mui/icons-material/Check';

export const Calendar = () => {
  const [value, setValue] = useState(new Date());
  const [highlightedDays, setHighlightedDays] = useState([1, 2, 13]);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <StaticDatePicker
        orientation="portrait"
        value={value}
        disableFuture
        onChange={(newValue) => setValue(newValue)}
        slots={{
          day: (props) => {
            const isSelected = !props.outsideCurrentMonth && highlightedDays.indexOf(props.day.getDate()) >= 0;
          
            return (
              <Badge
                key={props.day.toString()}
                overlap="circular"
                badgeContent={isSelected ? <CheckIcon htmlColor="red" /> : undefined}
              >
                <PickersDay {...props} />
              </Badge>
            );
          },
        }}
      />
    </LocalizationProvider>
  );
};

现在一切似乎都正常，第 1 天、第 2 天和第 13 天用红色勾号正确突出显示。