Tips for incorporating a responsive width feature into the Drawer component in MUI v5

Question

Tips for incorporating a responsive width feature into the Drawer component in MUI v5

I'm currently working with Material UI v5 and facing a challenge in creating a responsive drawer. I want the drawer to occupy 100% of the screen width on smaller devices, while taking up only 1/3 of the screen width on larger devices. Unfortunately, I am struggling to figure out how to access the Paper property to adjust the width dynamically based on device size.

Here is my code snippet:

import { Drawer, styled } from "@mui/material";

const ResponsiveDrawer = styled(Drawer)(({ theme }) => ({
  [theme.breakpoints.up("md")]: {
    width: "33%", // THIS ONLY CHANGES DRAWER WIDTH NOT PAPER WIDTH INSIDE THE DRAWER
  },
  [theme.breakpoints.down("md")]: {
    width: "100%",
  },
}));

export { ResponsiveDrawer };

This is how I implement it:

import { ResponsiveDrawer } from "./Style";

<ResponsiveDrawer
            anchor="right"
            open={drawer.state}
            onClose={() => drawer.onClick(false)}
        >
            ...
</ResponsiveDrawer>

css reactjs material-ui

Answer 1

Answer №1

After I posted the question, I quickly figured out the solution. It involves using inline styling with the useMediaQuery function.

const largeScreen = useMediaQuery(theme.breakpoints.up("sm"))

<Drawer
            anchor="right"
            open={drawer.state}
            onClose={() => drawer.onClick(false)}
            PaperProps={largeScreen ? {
                sx: {
                    width: 450,
                }
            } : {
                sx: {
                    width: "100%",
                }
            }
            }
        >
            <CartContent cart={cart} drawer={drawer}/>
        </Drawer>

Answer 2

After I posted the question, I quickly figured out the solution. It involves using inline styling with the useMediaQuery function.

const largeScreen = useMediaQuery(theme.breakpoints.up("sm"))

<Drawer
            anchor="right"
            open={drawer.state}
            onClose={() => drawer.onClick(false)}
            PaperProps={largeScreen ? {
                sx: {
                    width: 450,
                }
            } : {
                sx: {
                    width: "100%",
                }
            }
            }
        >
            <CartContent cart={cart} drawer={drawer}/>
        </Drawer>

Answer 3

Answer №2

To customize the width of a div inside the <Drawer> or <SwipeableDrawer> component, you can simply add the following structure and use CSS (or emotion/styled) to control the width according to your preferences.

<Drawer ...>
  <div className="custom-container">...</div>
</Drawer>

.custom-container {
  width: 95vw; // ideal for mobile devices

  /* Add media queries for other screen sizes here */
}

Answer 4

To customize the width of a div inside the <Drawer> or <SwipeableDrawer> component, you can simply add the following structure and use CSS (or emotion/styled) to control the width according to your preferences.

<Drawer ...>
  <div className="custom-container">...</div>
</Drawer>

.custom-container {
  width: 95vw; // ideal for mobile devices

  /* Add media queries for other screen sizes here */
}

Answer 5

Answer №3

The documentation provided a code snippet demonstrating how to manipulate the paper CSS within a drawer component to customize its width:

const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
  ({ theme, open }) => ({
    width: drawerWidth,
    flexShrink: 0,
    whiteSpace: 'nowrap',
    boxSizing: 'border-box',
    ...(open && {
      ...openedMixin(theme),
      '& .MuiDrawer-paper': openedMixin(theme),
    }),
    ...(!open && {
      ...closedMixin(theme),
      '& .MuiDrawer-paper': closedMixin(theme),
    }),
  }),
);

The same mixin was applied to '& .MuiDrawer-paper' in the main drawer CSS for consistency.

To ensure responsiveness, the paper selector should be included in the styled CSS of the responsive drawer, adjusting its width based on breakpoints:

const ResponsiveDrawer = styled(Drawer)(({ theme }) => ({
  [theme.breakpoints.up("md")]: {
    width: "33%",
    '& .MuiDrawer-paper': {
      width: "33%",
    },
  },
  [theme.breakpoints.down("md")]: {
    width: "100%",
    '& .MuiDrawer-paper': {
      width: "100%",
    },
  },
}));

For further details on customizing nested elements, reference the following link: https://mui.com/material-ui/customization/how-to-customize/#the-sx-prop.

Answer 6

The documentation provided a code snippet demonstrating how to manipulate the paper CSS within a drawer component to customize its width:

const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
  ({ theme, open }) => ({
    width: drawerWidth,
    flexShrink: 0,
    whiteSpace: 'nowrap',
    boxSizing: 'border-box',
    ...(open && {
      ...openedMixin(theme),
      '& .MuiDrawer-paper': openedMixin(theme),
    }),
    ...(!open && {
      ...closedMixin(theme),
      '& .MuiDrawer-paper': closedMixin(theme),
    }),
  }),
);

The same mixin was applied to '& .MuiDrawer-paper' in the main drawer CSS for consistency.

To ensure responsiveness, the paper selector should be included in the styled CSS of the responsive drawer, adjusting its width based on breakpoints:

const ResponsiveDrawer = styled(Drawer)(({ theme }) => ({
  [theme.breakpoints.up("md")]: {
    width: "33%",
    '& .MuiDrawer-paper': {
      width: "33%",
    },
  },
  [theme.breakpoints.down("md")]: {
    width: "100%",
    '& .MuiDrawer-paper': {
      width: "100%",
    },
  },
}));

For further details on customizing nested elements, reference the following link: https://mui.com/material-ui/customization/how-to-customize/#the-sx-prop.

Tips for incorporating a responsive width feature into the Drawer component in MUI v5

Answer №1

Answer №2

Answer №3

Similar questions

Combining CSS and JS files for accordion list - experiencing issues when used separately

Caution: The minSize property is obsolete and is scheduled for removal in the upcoming major update

Are you experiencing a strange problem with the CSS button when hovering, clicking, or with the border?

Steps for uploading an item to an API using an Excel document

How to position a Bootstrap 4 button group at the bottom of a flexbox container

The MUI Select component does not support using a Fragment as a child. Please consider using an array instead

HTML - Centered layout with a constant header and footer

Focusing on a specific input category inside a div container

Tips for resolving CORS error when using mailchimp API?

What is the best way to adjust the content of a Bootstrap Column to be at the bottom of the column

Error encountered while attempting to access API with REACT, NODE, and EXPRESS

Customizing the input field to have a width of 100%

Chrome: Box-shadow not visible on images with a background present

React Hooks state consistently lags behind

Hiding the overflow conceals the entire image in one direction, while leaving the other exposed

Is it possible to connect ng-model with a style tag?

By utilizing the <tr> element, one can enhance the border thickness by 1 pixel

Unable to append Jquery attribute to a div component

The error message "document is not defined in mapbox nextjs" indicates that there is an

Does anyone know if it's achievable to include a background position within the img /asp:image tag?