Semantic UI React：固定侧边栏和标题

Question

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

我已经在不同的文件中分别创建了 Sidebar 和 Header 组件，并将它们导入到 App.js 文件中，如下所示：

App.js：

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

问题是这两个组件被渲染在彼此之上（见屏幕截图）。有没有办法单独构建这些组件并将它们组合在一起？

我发现解决此问题的一种方法是将组件直接构建到侧边栏（请参阅 Sidebar.Pusher & text Stuff），它被正确呈现在侧边栏的右侧，而标题被重叠。

侧边栏：

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"> 包装起来。