React JS - How to add style in PaperProps of Dialog (material-ui)

Question

I am using Dialog components from material-ui ReactJs.

<Dialog fullScreen open={this.state.open}
  PaperProps={{ classes: {root: classes.dialogPaper} }}
  onClose={this.handleClose.bind(this)} transition={this.props.transition}>
  {this.props.children}
</Dialog>

In the above code I already override the root classes of PaperProps. Now I also want to override the style in the PaperProps. Is that possible in the PaperProps to override the styles.

Something like PaperProps={{ classes: {root: classes.dialogPaper}, style:{} }}

Please tell me if I am wrong. I want to override style also.

Zephan

Could you share why you'd want to override the inline style and the classes prop? – Isagoge

So I create a common component of dialog which used everywhere in the project with override class because to add some padding and more properties in the Paper component of dialog so I override it using PaperProps but Now this same component used somewhere in the code where padding in not required from PaperProps class so I need to override it using style in PaperProps. I hope it clear to you now. – Zephan

Answer 1

I got my answer

<Dialog
{...otherProps}
  PaperProps={{
    style: {
      backgroundColor: 'transparent',
      boxShadow: 'none',
    },
  }}
>
  {/* ... your content ... */}
</Dialog>

This is how we can put style in PaperProps of dialog component.

Zephan

This is perfect! I was missing the "style" part. Thanks! – Cryptonymous

Answer 2

<Dialog
  PaperProps={{
    style: {
      backgroundColor: 'Blue',
      color:'black'
    },
  }}
>
</Dialog>

Isoniazid

Please don't post only code as an answer, but include an explanation what your code does and how it solves the problem of the questions. Answers with an explanation are generally of higher quality, and more likely to attract upvotes. – Meneses