反应材料-ui响应式布局

Question

我想在我的React应用程序中使用material-ui.这些组件非常棒,但似乎并不是为了响应而设计的.例如,我正在尝试在我的主页中实现Drawer组件,如下所示:

        <div>
            <AppBar
                title="My App"
                iconClassNameRight="muidocs-icon-navigation-expand-more"
                onLeftIconButtonTouchTap={this.handleToggle}
            />
            <TextField
                hintText="Hint goes here"
                floatingLabelText="Enter your Note here..."
                multiLine={true}
                fullWidth={true}
                rows={2}
            />
            <Drawer
                docked={false}
                open={this.state.open}
                onRequestChange={(open) => this.setState({open})}
            >
                <MenuItem>One</MenuItem >
                <MenuItem>Two</MenuItem >
            </Drawer>
        </div>
    );

当我在手机上加载它时,它不会像我希望的那样调整它的大小.有没有办法只使用材料ui使这个响应？如果没有,有什么办法可以使用Bootstrap或其他一些软件包来提供响应能力吗？

谢谢,-Jim

Answer 1

以下是您将找到所有需求的示例项目.
来源:

https://github.com/rafaelhz/react-material-admin-template

演示:

https://rafaelhz.github.io/react-material-admin-template/#/form?_k=09zo2h

Answer 2

Material ui 还有一个响应式抽屉，这里是文档的链接

https://mui.com/components/drawers/