maxWidth uncenters對話框（模態）的材料 - 我

Question

我想設置max-widthmaterial-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組件及其子組件是否如預期般居中。

我怎樣才能把一個maxWidth，那麼對話組件上，並將它仍然可以正常中心？我試過玩了很多，但沒有多少運氣。

Answer 1

想通了。我應該使用Dialog組件上的contentStyle支柱。固定的例子看起來是這樣的：

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

感謝