MUI - 更改 DatePicker 中特定日期的颜色

Question

有人在 MUI 中添加过事件DatePicker吗？或者有人知道更改所选日期的背景？例如更改所选日期的颜色？或者在选定的日子添加生日？

我的代码：

import React from "react";
import TextField from "@mui/material/TextField";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";
import StaticDatePicker from "@mui/lab/StaticDatePicker";
import isWeekend from "date-fns/isWeekend";

export default function DatePicker() {
  const [value, setValue] = React.useState<Date | null>(new Date());
  console.log(value);
  return (
    <div>
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <StaticDatePicker<Date>
          orientation="portrait"
          openTo="day"
          value={value}
          shouldDisableDate={isWeekend}
          onChange={(newValue) => {
            setValue(newValue);
          }}
          renderInput={(params) => <TextField {...params} />}
        />
      </LocalizationProvider>
    </div>
  );
}

Answer 1

您可以创建自定义PickersDay组件并覆盖所选日期的背景颜色，如下所示：

import DatePicker from "@mui/lab/DatePicker";
import PickersDay, {
  PickersDayProps,
  pickersDayClasses
} from "@mui/lab/PickersDay";

const renderWeekPickerDay = (
  date: Date,
  selectedDates: Array<Date | null>,
  pickersDayProps: PickersDayProps<Date>
) => {
  return (
    <PickersDay
      {...pickersDayProps}
      sx={{
        [`&&.${pickersDayClasses.selected}`]: {
          backgroundColor: "green"
        }
      }}
    />
  );
};

然后覆盖renderDay回调DatePicker：

<DatePicker
  renderDay={renderWeekPickerDay}
  {...}
/>

编辑：如果您想用不同的样式突出显示多天：

type HighlightedDay = {
  date: Date;
  styles: React.CSSProperties;
};
const highlightedDays: HighlightedDay[] = [
  {
    date: birthday,
    styles: { color: "red" }
  },
  {
    date: addDays(new Date(), 6),
    styles: { /* ... */ }
  },
  {
    date: addDays(new Date(), 9),
    styles: { /* ... */ }
  },
  {
    date: addDays(new Date(), 12),
    styles: { /* ... */ }
  }
];

const renderWeekPickerDay = (
  date: Date,
  selectedDates: Array<Date | null>,
  pickersDayProps: PickersDayProps<Date>
) => {
  const matchedStyles = highlightedDays.reduce((a, v) => {
    return isSameDay(date, v.date) ? v.styles : a;
  }, {});

  return (
    <PickersDay
      {...pickersDayProps}
      sx={{
        ...matchedStyles,
        [`&&.${pickersDayClasses.selected}`]: {
          backgroundColor: "green"
        }
      }}
    />
  );
};

现场演示

参考

• https://mui.com/components/date-picker/#customized-day-rendering