CODEWITHSUNDEEP
reactjsmaterial-ui
Nick Brady
Nick Brady

Reputation: 6572

maxWidth uncenters dialog box (modal) for material-ui

I am trying to set the max-width on material-ui's Dialog component. When I set the max width, the modal becomes uncentered. I have created a minimal example here:

//npm install material-ui
import React from 'react'
import Dialog from 'material-ui/Dialog';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

function App() {
  return(
    <MuiThemeProvider>
      <div>
        <Dialog open={true} style={{maxWidth: '300px'}}>
          <h2>nice box</h2>
        </Dialog>
        <h1>React App</h1>
      </div>
    </MuiThemeProvider>
  );
}

export default App

The result looks like this:

enter image description here

If I remove the style={{maxWidth: '300px'}}, the the Dialog component and its children are centered as expected.

enter image description here

How can I put a maxWidth on the Dialog component and have it still be centered properly? I've tried playing around with it quite a bit without much luck.

Upvotes: 4

Views: 3964

Answers (1)

Nick Brady
Nick Brady

Reputation: 6572

Figured it out. I should have been using the contentStyle prop on the Dialog component. Fixed example looks like this:

//npm install material-ui
import React from 'react'
import Dialog from 'material-ui/Dialog';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

function App() {
  return(
    <MuiThemeProvider>
      <div>
        <Dialog open={true} contentStyle={{maxWidth: 300}}>
          <h2>nice box</h2>
        </Dialog>
        <h1>React App</h1>
      </div>
    </MuiThemeProvider>
  );
}

export default App

Thanks

Upvotes: 6

Related Questions