Material-UI：WithStyles(ForwardRef(Dialog)) 中未实现提供给 classes 道具的关键 `paperFullWidth`

Question

Material-UI: The key paperFullWidth provided to the classes prop is not implemented in WithStyles(ForwardRef(Dialog)). You can only override one of the following: root.

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

Answer 1

You can't use withStyles and styles differently from the element to manipulate the dialog element.

For example, incorrect usage:

const styles = (theme) => ({
  dialogPaper: {
    height: "95%",
    padding: 0,
    margin: 0,
  },
  dialogCustomizedWidth: {
    "max-width": "70%",
    "max-heigth": "95%",
  },
  root: {
    margin: 0,
    backgroundColor: theme.palette.dialogCustom.titleBg,
  },
  closeButton: {
    position: "absolute",
    right: theme.spacing(1),
    top: theme.spacing(1),
    color: theme.palette.dialogCustom.titleIconColor,
    padding: 3,
  },
  titleTypography: {
    color: theme.palette.dialogCustom.titleTextColor,
  },
});

const Dialog = withStyles((theme) => ({
  root: {
    margin: 10,
  },
}))(MuiDialog);

function dialog(props) {
  return (
    <Dialog
      classes={{
        paperFullWidth: props.classes.dialogCustomizedWidth,
        paper: props.classes.dialogPaper,
      }}
      transitionDuration={{ enter: 0, exit: 0 }}
      fullWidth={true}
      maxWidth={false}
      aria-labelledby="customized-dialog-title"
      open={props.visible}
      onClose={() => {
        props.close();
      }}
    >
      <DialogTitle
        id="customized-dialog-title"
        onClose={() => {
          props.close();
        }}
      >
        {props.title}
      </DialogTitle>
      <DialogContent
        dividers
        style={{ overflowX: "hidden", margin: 0, padding: 0 }}
      >
        {props.children}
      </DialogContent>
    </Dialog>
  );
}

export default withStyles(styles)(dialog);