Material-UI에서 대화상자의 높이를 설정하려면 어떻게 해야 합니까?
Material-UI의 예를 들어 보겠습니다.Dialog
커스텀 폭:
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
하지만 난 운이 없었어
대화상자의 기본 동작 중 일부를 재정의해야 합니다.그것의.paper
class는 원기둥 모양의 플렉스-방향으로 플렉스박스를 구현하고 최대 높이를 정의합니다.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%가 됩니다.
MUI v5 에서는, 다음의 값을 덮어쓸 수 있습니다.max-height
내면의 가치Paper
다음 코드를 사용하여 컴포넌트를 설정합니다.
<Dialog
PaperProps={{
sx: {
width: "50%",
maxHeight: 300
}
}}
{...other}
>
라이브 데모
대신 DialogContent 하위의 높이를 설정하십시오.대화상자는 내용을 포함하도록 커집니다.css/classname 등으로 이 작업을 수행할 수 있습니다.그러나 인라인으로 하기 위해서는 코드 디세트를 다음에 나타냅니다.
<Dialog
open={open}
fullWidth
maxWidth='lg' // set width according to defined material ui breakpoints
onClose={handleClose}
>
<DialogContent
style={{height:'600px'}}> // set height by pixels, percentage, etc
//insert content here
</DialogContent>
</Dialog>
답변 중에는 너무 복잡한 것도 있습니다.다음은 MUI v4 및 v5에서도 사용할 수 있는 간단하고 알기 쉬운 인라인 방법입니다.
<Dialog
open={true}
onClose={onClose}
... and other props
PaperProps={{ style: {
minHeight: '90%',
maxHeight: '90%',
}}}
>
material-ui의 최신 버전을 사용하는 경우 다음을 사용하십시오.
import MuiDialog from '@material-ui/core/Dialog';
const Dialog = withStyles((theme) => ({
paper: {
height: '100%' // 100% is for full height or anything else what you need
},
}))(MuiDialog);
export default function SomeComponentThatUsesCustomizedDialog() {
return (
<Dialog>
...
</Dialog>
)
}
그dialogPaper
승인된 답변에 사용된 소품은 작동하지 않고 콘솔에 오류가 발생합니다(material-ui v.4.11+를 사용하고 있습니다.여기서는 공식 대화상자 css api 문서에도 기재되어 있지 않습니다.그 때문에,paper
대신 소품입니다.
언급URL : https://stackoverflow.com/questions/47698037/how-can-i-set-a-height-to-a-dialog-in-material-ui
'programing' 카테고리의 다른 글
익명 유형을 포함하는 JsonResult의 아사트 (0) | 2023.02.21 |
---|---|
ng-배열이 비어 있는지 확인합니다. (0) | 2023.02.21 |
s3에서 가져온 이미지 표시 (0) | 2023.02.21 |
wp_nav_menu 변경 서브메뉴 클래스 이름? (0) | 2023.02.21 |
plsql에서 변수가 null인지 확인합니다. (0) | 2023.02.21 |