我的 Persistent Left Drawer 不会缩小右侧的内容，Material UI

Posted 2023-04-13

【中文标题】我的 Persistent Left Drawer 不会缩小右侧的内容，Material UI

【英文标题】：My Persistent Left Drawer doesn’t shrink the content at it’s right, Material UI

【发布时间】：2022-01-04 01:40:24

【问题描述】：

我正在尝试使用 React – Material UI 创建一个持久的左侧抽屉，并且我希望抽屉打开时右侧的内容会缩小

但这并没有发生，我认为是因为“开放”这个参数没有被识别：

我正在使用版本 5.1.1

为什么我可以这样做？

拉斐尔

【问题讨论】：

我将de MUI版本升级到5.2.1，错误消失了，但还是没有缩水

【参考方案1】：

检查您从@mui/material 导入的抽屉是否正确。

import Drawer from '@mui/material/Drawer';

【讨论】：

那里没问题...

【参考方案2】：

我已经做到了。

从 Material UI 页面复制持久抽屉的代码时，抽屉和页面内容都在同一个组件中

我不是你的情况，很可能你会这样做：

const drawerWidth = 210;

// @ts-ignore
const Main = styled('main',  shouldForwardProp: (prop) => prop !== 'open' )(( theme, open ) => (
    flexGrow: 1,
    padding: theme.spacing(3),
    transition: theme.transitions.create('margin', 
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen
    ),
    marginLeft: `$drawerWidth`,
    ...(open && 
        transition: theme.transitions.create('margin', 
            easing: theme.transitions.easing.easeOut,
            duration: theme.transitions.duration.enteringScreen
        ),
        marginLeft: 0
    )
));

const MainPage = () => 
    const [ drawerOpen, setDrawerOpen ] = React.useState(false);
    const [ marginLeftWhenDrawerOpens, setMarginLeftWhenDrawerOpens ] = useState(0);

    const handleDrawerOpen = () => 
        setDrawerOpen(true);
        setMarginLeftWhenDrawerOpens(drawerWidth);
    ;

    const handleDrawerClose = () => 
        setDrawerOpen(false);
        setMarginLeftWhenDrawerOpens(0);
    ;

    return (
        <React.Fragment>
            <PersistentDrawerLeft drawerOpen=drawerOpen closeDrawer=handleDrawerClose drawerWidth=drawerWidth />
            <Main
                // @ts-ignore
                open=drawerOpen
                sx= marginLeft: `$marginLeftWhenDrawerOpenspx` 
            >
                <Grid container direction="column">
                    <Grid item>
                        <MainPageHeader
                            openDrawer=handleDrawerOpen
                            marginLeftWhenDrawerOpens=marginLeftWhenDrawerOpens
                        />
                    </Grid>
                    <Grid item container>
                        <Grid item xs=1 />
                        <Content />
                        <Grid item xs=1 />
                    </Grid>
                    <Grid item>
                        <Footer />
                    </Grid>
                </Grid>
            </Main>
        </React.Fragment>
    );
;

当然，MainHeader会根据marginLeftWhenDrawerOpens来调整它的marginLeft

// @ts-ignore 在那里，因为我收到了一个错误，但事情仍然有效

拉斐尔