Material-UI: 提供给 类 道具的键 `paperFullWidth` 没有在 WithStyles(ForwardRef(Dialog)) 中实现

Question

Material-UI：提供给 类 道具的键 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>

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