material-uiでダイアログに高さを設定するにはどうすればよいですか？

Question

私はカスタムの幅との対話のための材料-UIの例で行くよ：私はしかし、私はWAN、私はmaxWidthをオーバーライドしてきたので、私はカスタム絶頂を設定することができるよということを知っている

const customContentStyle = { 
    width: '100%', 
    maxWidth: 'none', 
}; 

// some omitted code 

<Dialog 
    title="Dialog With Custom Width" 
    actions={actions} 
    modal={true} 
    contentStyle={customContentStyle} 
    open={this.state.open} 
> 
    This dialog spans the entire width of the screen. 
</Dialog> 

私はダイアログの高さのサイズを変更できるように高さで同じことをすることができません。 maxHeightをnoneに設定してheightに設定しようとしましたが、私はそれに幸運を祈ることはできませんでした。

Answer 1

Dialogのoverride some of the default behaviorが必要です。そのpaperクラスは、柱状のフレックス方向のフレックスボックスを実装し、最大高さを90vhと定義しています。これにより、ダイアログがコンテンツに拡大し、ビューポートの表示可能な高さの90％に達するとスクロールバーが表示されます。

あなたは、ビューポートのいくつかの割合にダイアログの高さを設定しpaperクラスをオーバーライドし、以下の例と同様にmin-heightとmax-heightを定義する必要がある場合：

import PropTypes from 'prop-types'; 
import { withStyles } from 'material-ui/styles'; 
import Dialog from 'material-ui/Dialog'; 

const styles = { 
    dialogPaper: { 
     minHeight: '80vh', 
     maxHeight: '80vh', 
    }, 
}; 

const YourDialog = ({ classes }) => (
    <Dialog classes={{ paper: classes.dialogPaper }}> 
     <div>dialogishness</div> 
    </Dialog> 
); 

export default withStyles(styles)(YourDialog); 

これがあることを保証しますダイアログの高さはビューポートの80％です。