7

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.

Kushal Jain
  • 3,029
  • 5
  • 31
  • 48
  • Could you share why you'd want to override the inline style *and* the `classes` prop? – dkulkarni Aug 07 '18 at 12:13
  • 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. – Kushal Jain Aug 07 '18 at 13:31

2 Answers2

19

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.

Kushal Jain
  • 3,029
  • 5
  • 31
  • 48
1
<Dialog
  PaperProps={{
    style: {
      backgroundColor: 'Blue',
      color:'black'
    },
  }}
>
</Dialog>
Das_Geek
  • 2,775
  • 7
  • 20
  • 26
inam ur rehman
  • 11
  • 4
  • 7
    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. – Mark Rotteveel Sep 27 '19 at 18:09