使用Material UI日期范围选择器后出现TypeScript编译错误

我按照MUI官方文档编写了StaticDateRangePicker的示例代码，但项目编译时出现TypeScript错误。错误信息指向@mui/material/styles/experimental_extendTheme.d.ts第313行，错误码TS1110，提示“Type expected”。

示例代码 #

import * as React from 'react';
import { Dayjs } from 'dayjs';
import TextField from '@mui/material/TextField';
import { LocalizationProvider } from '@mui/x-date-pickers-pro';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
import { DateRange } from '@mui/x-date-pickers-pro/DateRangePicker';
import Box from '@mui/material/Box';

export default function StaticDateRangePickerDemo() {
  const [value, setValue] = React.useState<DateRange<Dayjs>>([null, null]);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <StaticDateRangePicker
        displayStaticWrapperAs="desktop"
        value={value}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        renderInput={(startProps, endProps) => (
          <React.Fragment>
            <TextField {...startProps} />
            <Box sx={{ mx: 2 }}> to </Box>
            <TextField {...endProps} />
          </React.Fragment>
        )}
      />
    </LocalizationProvider>
  );
}

报错信息 #

Failed to compile.

TypeScript error in C:/Users/jonathas/projetos/portal-cliente-frontend/node_modules/@mui/material/styles/experimental_extendTheme.d.ts(313,9):
Type expected.  TS1110

    311 |       ? keyof T
    312 |       : keyof V extends string | number
  > 313 |       ? `${keyof T}-${ConcatDeep<Split<V>>}`
        |         ^
    314 |       : never
    315 |     : never
    316 |   : never;

package.json配置 #

{
  "name": "portal-cliente-atem",
  "version": "0.1.101",
  "private": true,
  "dependencies": {
    "@datadog/browser-rum": "^4.23.3",
    "@date-io/date-fns": "1.x",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@fontsource/montserrat": "^4.5.13",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@material-ui/pickers": "^3.2.10",
    "@mui/material": "^5.8.7",
    "@mui/x-date-pickers-pro": "^5.0.15",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/babel__core": "^7.1.20",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-slick": "^0.23.8",
    "apexcharts": "^3.35.2",
    "axios": "^0.21.0",
    "clsx": "^1.1.1",
    "date-fns": "^2.16.1",
    "dayjs": "^1.11.7",
    "formik": "^2.1.5",
    "framer-motion": "^8.4.2",
    "html-react-parser": "^0.14.1",
    "inversify": "^5.0.1",
    "jwt-decode": "^3.1.2",
    "keycloak-js": "^11.0.2",
    "lodash.groupby": "^4.6.0",
    "lodash.throttle": "^4.1.1",
    "moment-timezone": "^0.5.32",
    "notistack": "^1.0.0",
    "pdfmake": "^0.1.68",
    "react": "^16.13.1",
    "react-apexcharts": "^1.4.0",
    "react-dom": "^16.13.1",
    "react-json-view": "^1.19.1",
    "react-material-ui-carousel": "^2.1.1",
    "react-quill": "^1.3.5",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "react-slick": "^0.29.0",
    "reflect-metadata": "^0.1.13",
    "slick-carousel": "^1.8.1",
    "typescript": "^3.8.3",
    "uuid": "^8.3.2",
    "yup": "^0.29.3"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject",
    "start:prod": "REACT_APP_ENVIRONMENT='production' react-app-rewired start",
    "start:homologation": "REACT_APP_ENVIRONMENT='homologation' react-app-rewired start",
    "build:homologation": "REACT_APP_ENVIRONMENT='homologation' react-app-rewired build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/lodash.groupby": "^4.6.6",
    "@types/lodash.throttle": "^4.1.6",
    "@types/pdfmake": "^0.1.16",
    "@types/react-router-dom": "^5.1.5",
    "@types/uuid": "^8.3.0",
    "@types/yup": "^0.29.7",
    "husky": "^4.3.0",
    "prettier": "2.1.2",
    "pretty-quick": "^3.1.0",
    "react-app-rewired": "^2.1.7"
  },
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  }
}

这个错误的核心原因是TypeScript版本过低（3.8.3），无法兼容MUI v5.x使用的高级TypeScript语法（比如嵌套模板字面量类型）。${keyof T}-${ConcatDeep<Split<V>>}这类类型操作需要TypeScript 4.1及以上版本支持。

解决步骤：

1. 升级TypeScript到4.1或更高版本（推荐4.9.x，兼顾兼容性和稳定性）：

   npm install typescript@^4.9.5 --save-dev
   

2. 清理依赖缓存并重新安装：

   rm -rf node_modules package-lock.json
   npm install
   

3. 重启项目编译：

   npm start
   

额外提示：
你的项目同时安装了@material-ui/core（v4）和@mui/material（v5），两个版本共存可能引发潜在冲突。如果后续仍有兼容问题，建议逐步迁移到MUI v5，移除所有@material-ui v4相关依赖。

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