Javascript 如何从路由器dom中设置{Switch}组件的样式？我试着用<；部门>；而且不起作用

我有下面的代码，并试图更改地图组件样式。然而，它看起来像是来自交换机组件。如何使屏幕适合此处的“根”元素？我使用了来自MUI的容器或其他东西来调整大小，但它们都不起作用

   <MainWrapper>
        <Visible when={isLogged}>
          <LeftPanel />
        </Visible>
        <div style={{width: '100%'}}>
        <Visible when={isLogged}>
          <Navbar />
        </Visible>
        <div style={{height: '100hv'}}>
        <Switch>
          <PrivateRouter
            path='/map'
            component={MapPage}
            isLogged={isLogged}
            redirectTo={'/login'}
          />
          <PrivateRouter
            path='/profile'
            component={UserProfile}
            isLogged={isLogged}
            redirectTo={'/login'}
          />
          <PrivateRouter
            path='/login'
            component={Login}
            isLogged={!isLogged}
            redirectTo={'/map'}
          />
          <PrivateRouter
            path='/registration'
            component={Registration}
            isLogged={!isLogged}
            redirectTo={'/map'}
          />
          <PrivateRouter
            path='/'
            component={{}}
            isLogged={false}
            redirectTo={'/login'}
          />
        </Switch>
        </div>
        </div>
      </MainWrapper>
    );
  }
}

const MainWrapper = styled.div`
  height: 100vh;
  display: flex;
`;

);
}
}
const MainWrapper=styled.div`
高度：100vh；
显示器：flex；
`;

它可能与以下类型相关：

<div style={{height: '100hv'}}>

由于您使用MainWrapper作为flex-box，如果您为child-div:

<div style={{height: '100hv', flex: 1}}>

---

flex:1

意味着适合父母。

开关是一个容器，没有太多的视觉效果。在管线上渲染的组件之一似乎不是父级的100%高度。你能提供一个运行的代码沙盒来重新处理这个问题吗？谢谢你的回复。我本来打算使用codesendbox，但是有太多的代码需要调整。但是，当我删除所有的s，然后它就正常了，除此之外，我的导航栏不在其他组件的顶部，但它们只是地图的左侧。让一切都向右转。我一直在尝试添加来自MUI的组件。Drew，你是对的！有一个组件没有100vh。我现在觉得自己很愚蠢！哦，这是一个很好的捕获，但在OP的部分是一个打字错误。我希望这是它，但它不是：/我太迷路了。如果我移除导航+侧栏+div，它会工作。然后它覆盖了100%的宽度和高度。检查我的Eddite回答。在那里，Drew是正确的开始！我检查了其他部件，并将它们的高度固定在100vh，现在它可以工作了！现在，我的应用程序栏与其他组件重叠。是啊，哈哈，一个接一个的问题！爱情编码
<div style={{height: '100hv', flex: 1}}>