React material-ui responsive layout

Question

I am trying to use material-ui in my React application. The components are great, but it doesn't seem like they were designed to be responsive. For example, I'm trying to implement the Drawer component in my home page like this:

        <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 load this up on my phone, it doesn't adjust it's size as I had hoped. Is there any way to make this responsive using only material-ui? If not, is there any way I can use Bootstrap or some other package for responsiveness?

Thanks, -Jim

Answer 1

I made a complete example for it and it is totally responsive here in codesandbox

you should put your main pages on a box like this :

   <Box
            component="main"
            sx={{ flexGrow: 1 }}
            className={classes.content}
            style={{ width: "calc(100% - 240px)" }}
          >
<TextField
                hintText="Hint goes here"
                floatingLabelText="Enter your Note here..."
                multiLine={true}
                fullWidth={true}
                rows={2}
            />
</Box>

this topic is bigger than I could write all code here.