Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

135
Views
Material-UI: The key `paperFullWidth` provided to the classes prop is not implemented in WithStyles(ForwardRef(Dialog))

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>
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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);
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!