Mui Drawer删除应用程序页面内容

Question

我有一个关于mui抽屉的问题。正如我在互联网上看到的，drawer从不删除页面的内容，但在我的情况下，是的，它确实删除了：(你能帮我弄清楚问题出在哪里吗？

这是我的抽屉组件代码：

import Drawer from '@mui/material/Drawer';
import  { useState }  from 'react';
import Box from "@mui/material/Box";
export default function SideBar() {
const [isDrawerOpen, setDrawerOpen] = useState(false);
return (
<div>
<button onClick={() => setDrawerOpen(true)}>left</button>
<Drawer
anchor="right"
open={isDrawerOpen}
onClose={() => setDrawerOpen(false)}
>
<Box>sdfsd</Box>
</Drawer>
</div>

)

;
}

我把它写在这一页上。

import Drawer from "../components/SideBar"
export default function ShopSingle(){
<div>
{/* <Navbar></Navbar>
<HeaderHome></HeaderHome> */}
<div>
PAGE CONTENT
<Drawer></Drawer>
</div>

{/* <Footer></Footer> */}
</div>
}

我对React很陌生，你能帮我解决问题吗？

Answer 1

如果你想在右边打开抽屉，并且你的项目是rtl:，你应该添加这一行

sx={{
'& .MuiDrawer-paperAnchorLeft': {
right: '0 !important',
left: 'unset !important',
minWidth: '195px'
}
}}