Как сделать поле ввода как можно более широким внутри элемента меню в верхнем меню с помощью semantic-ui-реагировать

Question

У меня есть заголовок для моего приложения. И это меню со многими пунктами. У меня есть menu.item, который оборачивает поле ввода (его целью является поиск заданного ввода по всему сайту). Я хочу, чтобы этот menu.item был таким же широким, как оставшееся пространство с полем ввода, как его дочерние элементы. Моя проблема очень похожа на это визуально. И да, я пробовал жидкую опору во многих перестановках, к сожалению, это не помогло. Любая помощь или понимание этой проблемы? Пример моего кода приведен ниже, а соответствующий код - здесь.

<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 в своем адаптивном меню. Это не столько проблема Semantic UI React, сколько проблема CSS. Я не верю, что существует класс, который существует в стилях семантического пользовательского интерфейса, чтобы заставить элемент меню расти. Вам придется решить это с помощью CSS. Требуется только одно изменение.

Menu является display:flex в CSS. 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>

И вот пример рабочих кодов и коробки: https://codesandbox.io/s/5x0x6ppm3k