Unable to modify some internal styles of Material UI's <Dialog> component

Question

I'm trying to apply some reasonably simple styles to my <Dialog> component. In this case, I am trying to round the corners with a border radius. Here are some simple inline styles that I'd like to use to override the default <Dialog> styles:

let overrideStyles = {
  padding: 0,
  margin: 0,
  borderRadiusTopLeft: '4px',
  borderRadiusTopRight: '4px',
};

<Dialog> provides a wide variety of possibilities for overriding internal styles. These include bodyStyle, contentStyle, style, titleStyle, overlayStyle, and actionsContainerStyle. I decided to try to apply these styles to each one.

<Dialog
  bodyStyle={overrideStyles}
  contentStyle={overrideStyles}
  style={overrideStyles}
  titleStyle={overrideStyles}
  overlayStyle={overrideStyles}
  actionsContainerStyle={overrideStyles}
  modal={overrideStyles}
>
  <TestPanel/>
</Dialog>

When I render my TestPanel, it ends up looking like this:

Notice the corners, where my border radius has not been applied... I opened up the inspector and noticed the following div:

If I apply the border radius styling to the highlighted div, the dialog will have its corners rounded as expected. Which leads me to my question...

How do I override the styles of Material UI's <Dialog> component to apply rounded corners as my CSS is attempting?

Answer 1

You can override styles like below.

const styles = { 
  root: { }
  paper: { borderRadius: 15 } 
} 

// ... 

<Dialog classes={{ 
    root: classes.root, 
    paper: classes.paper 
}}>
</Dialog>

Answer 2

I solved it with paperProps property.

<Dialog   PaperProps={{
    style: { borderRadius: 2 }   }}
  >   .... </Dialog>

This perfeclty worked for me