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

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:

Test panel

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

Div without style

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?

cssreactjsdialogmaterial-ui


Solution 1:[1]

You can override styles like below.

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

// ... 

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

Solution 2:[2]

I solved it with paperProps property.

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

This perfeclty worked for me

Solution 3:[3]

Unfortunately, Material UI isn't supremely style-friendly. In this case, there's no prop you can override to change the border-radius, so we've got to apply our own class:

let headerStyles = {
  color: 'white',
  textAlign: 'center',
  fontSize: 24,
  backgroundColor: '#3B8DBC',
  padding: 20,
  borderTopLeftRadius: 4,
  borderTopRightRadius: 4
};

let bodyStyles = {
  backgroundColor: 'white',
  padding: 10,
  height: 200
};

<Dialog className='test'>
  <div style={headerStyles}>Testing</div>
  <div style={bodyStyles}>5:43pm</div>
</Dialog>

Then style that class, and, yes, the border-radius has to be set on both of the below CSS classes as well as the TestPanel header: 

 /* Some rules use !important because Material UI sets them by default */
.test > div > div {
  background-color: #3B8DBC;  /* Same background-color as TestPanel */
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.test > div > div > div {
  /* Not overriding the color and border radius here too result in your changes
     not being visible. */
  background-color: inherit !important;
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
}

.test > div > div > div > div {
  /* This div is the topmost padding between the modal content and the edge
     of the modal */
  padding: 0 !important;
}

This ends up looking like what you want: screenshot here

Hope this helps!

Solution 4:[4]

You can override <Dialog /> styles globally in your application when creating your theme object. The paper key of MuiDialog will let you target the border-radius.

const theme = createMuiTheme({
  overrides: {
    MuiDialog: {
      paper: {
        borderTopLeftRadius: '4px',
        borderTopRightRadius: '4px'
      }
    }
  }
})

Dialog - CSS api Material UI Theming

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 MauriceNino
Solution 2 Tharindu Marapana
Solution 3 jdecked
Solution 4 Sebastien Raynaud

Related Questions