我将使用具有自定义宽度的 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
,但没有成功。
最佳答案
您需要override some of the default behavior Dialog的。它的 paper
类实现了一个具有柱状弯曲方向的 Flexbox,并定义了 90vh
的最大高度。这允许对话框增长到其内容并在达到视口(viewport)可见高度的 90% 时显示滚动条。
如果您需要将对话框高度设置为视口(viewport)的某个百分比,请覆盖 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);
这将确保对话框的高度为视口(viewport)的 80%。
关于reactjs - 如何在 Material-UI 中设置对话框的高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47698037/