如何实现 Drawer MUI v5 组件的响应宽度？答案

【问题标题】：How to implement responsive width for Drawer MUI v5 component?如何实现 Drawer MUI v5 组件的响应宽度？
【发布时间】：2022-02-06 17:32:37
【问题描述】：

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

我的代码：

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>

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

您可以像这样在<Drawer> 或<SwipeableDrawer> 组件内添加一个div，并通过CSS（或emotion/styled，如果您愿意）控制div 的宽度。

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

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

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

【讨论】：

真的没用。如果这样做，则 div 将作为 Paper 组件的子组件放置，因此您不能使用基于百分比的值，因为 % 将基于 Paper 组件。

【解决方案2】：

我在发布问题后不久就想通了。这涉及使用 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>

【讨论】：