material-ui에서 대화 상자 높이를 어떻게 설정할 수 있습니까?

Question

나는 사용자 정의 폭의 대화의 재료 UI를 예제로 갈거야

:

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> 

내가이 maxWidth 무시했기 때문에 나는 사용자 정의 높이를 설정할 수있어 것을 알고는, 그러나 내가 완 대화 상자의 높이를 조절할 수 있도록 높이와 같은 것을 할 수 있어야합니다. maxHeight을 none으로 설정하고 height을 설정해 보았습니다.하지만 운이 없었습니다.

Answer 1

Dialog의 override some of the default behavior이 필요합니다. 그것의 paper 클래스는 플랙 서블을 플랙 서 플렉스 방향으로 구현하고 최대 높이를 90vh으로 정의합니다. 이것에 의해, Dialog의 컨텐츠가 확대 해, 스크롤 바가 뷰포트의 가시 높이의 90 %에 이르면 표시됩니다.

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); 

이 사항을 확인합니다 : 뷰포트의 일부 비율에 대화 상자 높이를 설정해야하는 경우

, 아래의 예와 유사한 방식으로 min-height 및 max-height을 정의하는 paper 클래스를 오버라이드 (override) 대화 상자의 높이가 뷰포트의 80 %입니다.