Material-UI에서 대화상자의 높이를 설정하려면 어떻게 해야 합니까?

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하지만 난 운이 없었어

대화상자의 기본 동작 중 일부를 재정의해야 합니다.그것의.paperclass는 원기둥 모양의 플렉스-방향으로 플렉스박스를 구현하고 최대 높이를 정의합니다.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