如何在Material-UI中设置对话框的高度？ [英] How can I set a height to a Dialog in Material-UI?

问题描述

我将使用具有自定义宽度的Dialog的Material-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设置为height，但没有成功。

推荐答案

您需要override some of the default behaviorDialog。它的paper类实现了一个具有柱状弯曲方向的FlexBox，并定义了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%。

这篇关于如何在Material-UI中设置对话框的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！