reactjs - material-ui的maxWidth uncenters对话框(模态)

Question

我正在尝试设置 max-width在 material-ui的 Dialog成分。当我设置最大宽度时，模态变得不居中。我在这里创建了一个最小的例子:

//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

结果如下所示:



如果我删除 style={{maxWidth: '300px'}} ， Dialog组件及其子组件按预期居中。



如何在 Dialog 组件上放置 maxWidth 并使其仍然正确居中？我试过玩了很多，但运气不佳。

Answer 1

弄清楚了。我应该一直在使用 contentStyle Dialog 上的 Prop 成分。固定示例如下所示:

//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

谢谢