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

【问题标题】：Material-UI: The key `paperFullWidth` provided to the classes prop is not implemented in WithStyles(ForwardRef(Dialog))Material-UI：提供给 classes 道具的键 `paperFullWidth` 未在 WithStyles(ForwardRef(Dialog)) 中实现
【发布时间】：2021-10-27 12:10:14
【问题描述】：

Material-UI：提供给 classes 属性的键 paperFullWidth 未在 WithStyles(ForwardRef(Dialog)) 中实现。您只能覆盖以下之一：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>

【问题讨论】：

标签： javascript reactjs material-ui react-with-styles

【解决方案1】：

您不能使用与元素不同的 withStyles 和样式来操作对话框元素。

例如，错误用法：

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);

【讨论】：