如何实现抽屉式MUI v5组件的响应宽度？

Question

我正在使用材料UI v5，并试图制作一个响应抽屉，对于较小的设备，它将占用屏幕宽度的100%，而对于较大的设备，它应该只占屏幕宽度的1/3。但我不知道如何访问纸张属性来修改实际宽度并使其响应。

我的代码：

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

我如何使用它：

import { ResponsiveDrawer } from "./Style";

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

Answer 1

我在发完这个问题后不久就想出了答案。这涉及到使用useMediaQuery的内联样式。

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

您可以像这样在<Drawer>或<SwipeableDrawer>组件中添加div，并通过CSS控制div的宽度(如果您愿意的话，可以使用情感/样式)。

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

.container {
  width: 95vw; // for mobile

  ... add media queries for rest of the screen sizes here
}