修复了 react-semantic-ui 中的侧边栏

Question

我在 react-semantic-ui 中有一个 Sidebar，它有一些 link 到其他页面、导航菜单。 它工作正常，只有当不同页面渲染不同尺寸的侧边栏尺寸也随之改变时。我想让侧边栏固定。这是我的代码：

return (
  url !== '/auth' && (
    <div>
      <Header />
      <Button secondary onClick={this.toggleVisibility}>
        منو{' '}
      </Button>
      <Segment>
        <Sidebar.Pushable as={Segment}>
          <Sidebar
            as={Menu}
            animation="push"
            width="wide"
            direction="right"
            visible={visible}
            icon="labeled"
            vertical
            inverted
          >
            <Nav {...{ navLinks }} />
          </Sidebar>
          <Sidebar.Pusher>
            <div>{navLinks.map(renderNavLink)}</div>
            <BlockerModal />
          </Sidebar.Pusher>
        </Sidebar.Pushable>
      </Segment>
    </div>
  )

如何固定侧边栏而不在导航时改变它的大小？

Answer 1

您可能正在使用 <Sidebar as={Menu}>，但实际上并未在 <Nav > 中使用任何 <Menu.Item>。 尝试将每个边栏项目包装在 <Menu.Item>

中