如何在侧边栏未折叠时使浏览器窗口的 div 100% 宽度？

如何解决如何在侧边栏未折叠时使浏览器窗口的 div 100% 宽度？

我是 Reactjs 的新手，不过我一直在尝试制作一个包含地图的漂亮桌面平台。为了实现这一点，我使用了 react-map-gl 和 react-pro-sidebar 库。您可以在此处查看库 https://www.npmjs.com/package/react-pro-sidebar https://visgl.github.io/react-map-gl/ 。使用这些库后，我遇到了一个问题，即当侧边栏未折叠时，地图窗口的大小不会调整为我在 MapContainer div 中定义的 100%。正如你在上面的代码中看到的（我只放了一大块代码，因为它很多）：

const [viewport,setViewport] = useState({
    width: '100%',height: '100%',latitude: 40.634135,longitude: -8.6598916,zoom: 6
  });
return (
    <MapContainer>
      <ReactMapGL
        {...viewport}
        mapStyle="mapBox://styles/mapBox/light-v10"
        onViewportChange={nextViewport => setViewport(nextViewport)}
        mapBoxApiAccesstoken={process.env.REACT_APP_MAPBox_TOKEN} >
        (...)
       </ReactMapGL>
     </MapContainer>
   
const MapContainer = styled.div`
  position: relative;
  width: 100%;
  height: 100%;
`; 

我的侧边栏代码是这样的：

    const [collapsed,setCollapsed] = useState();
    
    return (

        <ProSidebar onMouseLeave={() => setCollapsed(true)} onMouseEnter={() => setCollapsed(false)} collapsed={collapsed}>
            <SidebarHeader>
                <img src={logo} alt="logo" />
                    </SidebarHeader>
            <SidebarContent>
                <Menu iconShape="square">
                    <MenuItem icon={<RiDashboardLine />}>
                        Dashboard
                                <Link to="/dashboard" />
                    </MenuItem >
                    <MenuItem icon={<aifillAlert />}>
                        Alerts
                                <Link to="/alerts" />
                    </MenuItem>
                    <MenuItem icon={<RibroadcastLine />}>
                        RSUs
                                <Link to="/rsus" />
                    </MenuItem>
                </Menu>
            </SidebarContent>
            <SidebarFooter>

            </SidebarFooter>
        </ProSidebar>

您可以在此处观看结果： enter image description here

enter image description here

希望你能帮我修复这个错误！我试图修复它，但我没有完成：/