如何在Material-UI对话框中使用ResponsiveFullScreen

Question

我正在使用Material-UI的预发布,你可以使用网格布局并实现断点.我已经使用了隐藏的组件和网格,现在我想使用一个Dialog的ResponsiveFullScreen组件.问题是我不知道如何使用它和官方页面只是给出一点解释.

我可以使用Hidden来改变两个不同的对话框,但我不想以这种方式复制我的代码.那么是否有人知道如何使用它？我只想让对话在xs断点处成为fullScreen.

我正在使用扩展类React.Component构建我的对话框,并在render()中返回一个带有我自己内容的Material-UI对话框.

Answer 1

最后,我知道如何使用withResponsiveFullScreen.您必须直接将它用于Dialog Material-UI类,然后使用返回的组件来创建对话框.

这里和例子:

var ResponsiveDialog = withResponsiveFullScreen()(Dialog);
class MyDialog extends React.Component {
    constructor(props){ super(props); };

    render(){
        return (
            <ResponsiveDialog>
                <DialogTitle></DialogTitle>
                <DialogContent></DialogContent>
            </ResponsiveDialog>
        );
    }
}

重要提示:请勿在渲染功能中使用withResponsiveFullScreen.

要使用断点更改断点,只需使用断点和对象:

var ResponsiveDialog = withResponsiveFullScreen({breakpoint: 'xs'})(Dialog);