Responsive Material Oriented Layout

Question

I am trying to use material-ui in my React app. The components are great, but it looks like they were designed to be responsive. For example, I am trying to implement the Drawer component on my home page as follows:

        <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>
    );

When I download this to my phone, it does not adjust its size, as I hoped. Is there a way to make this responsive using only material-ui? If not, can I use Bootstrap or some other responsive package?

Thanks, Jim

Answer 1

, .

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

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