CODEWITHSUNDEEP
cssreactjsdialogmaterial-ui
Chris
Chris

Reputation: 4983

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?

Upvotes: 12

Views: 13035

Answers (5)

Muhammad Naveed Nawab
Muhammad Naveed Nawab

Reputation: 35

The first answer is not working for me. I tried this and it work perfect for me:

sx={{
    "& .MuiDialog-container": {
    "& .MuiPaper-root": {
      width: "100%",
      maxWidth: "740px",
      borderRadius: "8px"
        }
      },
    }}

Upvotes: 0

ton1
ton1

Reputation: 7628

You can override styles like below.

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

// ... 

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

Upvotes: 9

Tharindu Marapana
Tharindu Marapana

Reputation: 265

I solved it with paperProps property.

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

This perfeclty worked for me

Upvotes: 11

Sebastien Raynaud
Sebastien Raynaud

Reputation: 61

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

Upvotes: 3

jdecked
jdecked

Reputation: 31

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!

Upvotes: 3

Related Questions