Material-UI Dialog组件classes传paperFullWidth键未实现报错如何解决

该报错出现在Material UI v5及以上版本，v4版本中Dialog组件的classes支持paper、paperFullWidth等自定义键，但v5重构了Dialog的样式结构，Dialog组件本身的classes属性仅支持root这一个自定义键，paper相关的样式归属到了内部嵌套的Paper组件上，不能直接在Dialog的classes里定义。

有两种可行的处理方式：

• 方式1：通过PaperProps属性传递Paper组件的自定义样式
  把原来写在Dialog classes里的paper、paperFullWidth配置移动到PaperProps的classes中，修改后的代码如下：

<Dialog
  transitionDuration={{ enter: 0, exit: 0 }}
  fullWidth={true}
  maxWidth={false}
  aria-labelledby="customized-dialog-title"
  PaperProps={{
    classes: {
      root: props.classes.dialogPaper,
      fullWidth: props.classes.dialogCustomizedWidth
    }
  }}
></Dialog>

注意Paper组件的全宽样式对应键为fullWidth，不是原来的paperFullWidth。

• 方式2：使用styled组件包裹自定义样式
  如果采用styled API自定义Dialog，可直接定位内部的Paper组件写样式：

import { styled } from '@mui/material/styles';
import Dialog from '@mui/material/Dialog';

const CustomDialog = styled(Dialog)(({ theme }) => ({
  '& .MuiPaper-root': {
    // 写入原dialogPaper对应的样式规则
  },
  '& .MuiPaper-fullWidth': {
    // 写入原dialogCustomizedWidth对应的样式规则
  }
}));

后续直接使用CustomDialog组件替代原生Dialog即可，无需额外传递classes配置。

内容的提问来源于stack exchange，提问作者Gülsen Keskin