title: Unable to modify some internal styles of Material UI's <Dialog> component
body: <p>I'm trying to apply some reasonably simple styles to my <code>&lt;Dialog&gt;</code> 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 <code>&lt;Dialog&gt;</code> styles:</p>
  
  <pre><code>let overrideStyles = {
    padding: 0,
    margin: 0,
    borderRadiusTopLeft: '4px',
    borderRadiusTopRight: '4px',
  };
  </code></pre>
  
  <p><code>&lt;Dialog&gt;</code> provides a wide variety of possibilities for overriding internal styles.  These include <code>bodyStyle</code>, <code>contentStyle</code>, <code>style</code>, <code>titleStyle</code>, <code>overlayStyle</code>, and <code>actionsContainerStyle</code>.  I decided to try to apply these styles to <em>each</em> one.</p>
  
  <pre><code>&lt;Dialog
    bodyStyle={overrideStyles}
    contentStyle={overrideStyles}
    style={overrideStyles}
    titleStyle={overrideStyles}
    overlayStyle={overrideStyles}
    actionsContainerStyle={overrideStyles}
    modal={overrideStyles}
  &gt;
    &lt;TestPanel/&gt;
  &lt;/Dialog&gt;
  </code></pre>
  
  <p>When I render my <code>TestPanel</code>, it ends up looking like this:</p>
  
  <p><a href="https://i.stack.imgur.com/LXt4X.png" rel="noreferrer"><img src="https://i.stack.imgur.com/LXt4X.png" alt="Test panel"></a></p>
  
  <p>Notice the corners, where my border radius has not been applied... I opened up the inspector and noticed the following div:</p>
  
  <p><a href="https://i.stack.imgur.com/N8RMT.png" rel="noreferrer"><img src="https://i.stack.imgur.com/N8RMT.png" alt="Div without style"></a></p>
  
  <p>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...</p>
  
  <p>How do I override the styles of Material UI's <code>&lt;Dialog&gt;</code> component to apply rounded corners as my CSS is attempting?</p>