material-ui的maxWidth uncenters对话框（模态）

Question

我正在尝试在max-width的{​​{1}}组件上设置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'}}组件及其子组件将按预期居中。

如何在对话框组件上放置maxWidth并让它仍然正确正确？我已经尝试了很多运气而没有太多运气。

Answer 1

想出来。我应该在contentStyle组件上使用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} contentStyle={{maxWidth: 300}}>
          <h2>nice box</h2>
        </Dialog>
        <h1>React App</h1>
      </div>
    </MuiThemeProvider>
  );
}

export default App

由于