javascript - 语义 UI React : fixed sidebar & header

Question

我正在尝试创建一个标题和侧边栏，其中标题位于侧边栏的左侧，而不是像下图那样重叠。

我在不同的文件中分别创建了侧边栏和标题组件，并将两者导入以呈现到 App.js 文件中，如下所示:

App.js:

render() {    
  return (    
    <div className='fp-wrapper'>
        <AppSidebar />
          <div className='fp-panel-main'>
            <AppHeader />
        </div>
    </div>
  );
}

问题在于两个组件被渲染在彼此之上(参见屏幕截图)。有什么方法可以单独构建这些组件并将它们组装在一起吗？

我发现解决此问题的一种方法是将组件直接构建到侧边栏(请参阅 Sidebar.Pusher 和文本内容)，该组件在侧边栏右侧正确呈现，而标题重叠。

侧边栏:

render() {
  const { activeItem } = this.state
  return (
    <Sidebar.Pusher>    
      <Sidebar
        as={Menu}
        animation='push'
        direction='left'
        icon='labeled'
        inverted
        visible='true'
        vertical
        width='thin'
      >
      <Menu.Item as='a'>
        <Icon name='home' />
        Lexis
      </Menu.Item>
      <Menu.Item as='a'>
        Page 1
      </Menu.Item>
      <Menu.Item as='a'>
        Page 2
      </Menu.Item>
      </Sidebar>

      <Sidebar.Pusher>  
             Stuff
      </Sidebar.Pusher>

Answer 1

一种方法是包装 <AppSidebar>在 <div className="sidebar">并使用display: flex并排显示它们，就像这样。

render(){
  return (
    <div className='fp-wrapper'>
      <div className="sidebar">
        <AppSidebar />
      </div>
      <div className='fp-panel-main'>
        <AppHeader />
      </div>
    </div>
  );
}

并添加CSS

.fp-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: nowrap; //This will keep the layout at all screen sizes.
}
.sidebar {
  width: 30%;
}
.fp-panel-main {
  width: 70%;
}

注意:您还可以将 className 或 id 添加到 <SideBar.Pusher>你不需要包装 <AppSideBar />与 <div className="sidebar"> .