使用MUI PickersDay类时出现TypeScript类型错误

依赖更新后出现“属性'selected'不存在于类型{}”的报错，核心是MUI的类型系统变严格了，需要明确pickersDayClasses的类型关联，以下是具体解决步骤：

1. 确保正确导入类型与类名 #

首先确认从正确的包导入pickersDayClasses和对应类型，以MUI X v6+为例，导入路径如下：

import { PickersDay, PickersDayProps, pickersDayClasses } from '@mui/x-date-pickers/PickersDay';
import type { PickersDayClasses } from '@mui/x-date-pickers/PickersDay';

2. 修正代码并完善类型约束 #

以下是修正后的renderWeekPickerDay函数，同时解决原代码中的拼写、返回语句遗漏等问题：

const renderWeekPickerDay = (
  date: Date,
  selectedDates: Array<Date | null>,
  pickersDayProps: PickersDayProps<Date>
) => {
  const highlightedDateColor = getColor() === 'primary' ? "#008000" : "#FF0000";

  return (
    <PickersDay
      {...pickersDayProps}
      sx={{
        // 通过typeof让TypeScript识别pickersDayClasses的合法属性
        [`&&.${(pickersDayClasses as typeof pickersDayClasses).selected}`]: {
          backgroundColor: highlightedDateColor
        }
      }}
    />
  );
};

3. 简化写法：直接类型断言 #

如果觉得上面的写法繁琐，也可以直接给类名做类型断言，明确告知TypeScript该属性存在：

sx={{
  [`&&.${(pickersDayClasses as { selected: string }).selected}`]: {
    backgroundColor: highlightedDateColor
  }
}}

额外注意点 #

• 原代码中selectedDatesL是拼写错误，需修正为selectedDates；
• 自定义renderDay的函数必须返回JSX元素，原代码遗漏了return语句；
• highlightedDateColor是变量，不要加引号，否则会被识别为字符串字面量而非变量引用。

内容的提问来源于stack exchange，提问作者sephiroth