反应材料-ui响应式布局

时间:2017-07-12 21:00:20

标签: reactjs responsive-design material-ui

我正在尝试在我的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

1 个答案:

答案 0 :(得分:13)