React material-ui responsive layout

user_5724789 0
Viewed 17511

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

responsive-design material-ui reactjs
3 Answers

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.

enter image description here

enter image description here

user_129021080
user_125526720

Sounds like you are in need of the material-ui useMediaQuery: https://mui.com/components/use-media-query/

Summary of how I set it up in my application using functional components:

1) Created two constants one useMediaQuery to detect the current screen resolution, second a useState that we will use to turn the drawer to an open or closed position depending on the screen resolution

2) Implemented a useEffect hook to reRender anytime the useMediaQuery const changes value. If larger than a medium screen resolution, set the sideBar to open. If not, turn it to a closed position.

3) You should be able to test this in your browser by making your browser bigger and smaller and seeing it open and close responsively. This same useMediaQuery process can be used for any material ui component to make it responsive to screen size.

Hopefully this helps!

const Main = observer((): JSX.Element => {
/* You can use standard pixel sizes (e.g. 900px) if desired instead of sm, md, lg */
const md = useMediaQuery(theme.breakpoints.up('md')); 
const [appBarOpen, setAppBarOpen] = useState(true);


/* Collapse the side drawer if the screen size is medium or lower. Have it open 
if screen size is above medium */
useEffect(() => {
    setAppBarOpen(md === false ? false : true);
}, [md]);

return(
    <Drawer
        variant="permanent"
            <Typography variant="h4">Menu</Typography>
        <SideBar open={appBarOpen} />
    </Drawer>;
    )
user_172052740
Related