如何使用 semantic-ui-react 在顶部菜单的菜单项内使输入字段尽可能宽

Question

我的应用有一个 header。这是一个包含许多项目的菜单。我有一个 menu.item 包装了一个输入字段（它的目的是搜索给定的输入 site-wide）。我希望 menu.item 与其余 space 一样宽，输入字段与其 children 一样宽。我的问题与 this visually. And yes, I have tried fluid prop in many permutations, unfortunately it did not help. Any help or insight on this problem? My Sample code is below and related codepen is here.

非常相似

<Menu inverted={true} fixed="top" size="small" color="violet">

  <Menu.Item as="a" header={true} >
    <Icon inverted={true} size="big" name="image" />
  </Menu.Item>

  <Container fluid={true}>
    <Menu.Item >
      <Input
        inverted={true}
        transparent={true}
        icon="search"
        iconPosition="left"
        placeholder="Search.."
      />
    </Menu.Item>
  </Container>

  <Menu.Item as="a" header={true} position="right">
    <Icon inverted={true} size="big" name="mail" />
  </Menu.Item>

</Menu>

Answer 1

Semantic UI 在其响应式菜单上使用 flexbox 样式。这不是语义 UI React 问题，而是 CSS 问题。我不相信在语义 UI 样式中存在 class 来使菜单项增长。你必须用 CSS 来解决这个问题。它只需要一个改变。

Menu 是 CSS 中的 display:flex。 Menu.Item 组件都是子组件。内部搜索的应该将其添加为内联样式：style={{ flexGrow: 2 }}

您也不需要 Container 组件。这就是一切：

<Menu inverted={true} fixed="top" size="small" color="violet">
  <Menu.Item as="a" header={true}>
    <Icon inverted={true} size="big" name="image" />
  </Menu.Item>

  <Menu.Item style={{ flexGrow: 2 }}>
    <Input
      inverted={true}
      transparent={true}
      icon="search"
      iconPosition="left"
      placeholder="Search..."
    />
  </Menu.Item>

  <Menu.Item as="a" header={true} position="right">
    <Icon inverted={true} size="big" name="mail" />
  </Menu.Item>
</Menu>

这是一个有效的 codesandbox 示例：https://codesandbox.io/s/5x0x6ppm3k

如何使用 semantic-ui-react 在顶部菜单的菜单项内使输入字段尽可能宽

How to make an input field as wide as possible inside a menu item in a top menu using semantic-ui-react

reactjs

semantic-ui-react