Semantic-ui-react Заставить ввод использовать полную ширину

У меня есть следующий сегмент

<Segment className='AddAPIKey'>
                <Form>
                    <Form.Group>
                        <Form.Field>
                            <Input placeholder='XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX' />
                        </Form.Field>
                        <Form.Button color='green' floated='right' content='Add new API key' />
                    </Form.Group>
                </Form>
            </Segment>

Со стилем:

.ui.AddAPIKey {
  display: flex;
  justify-content: right;
}

В результате чего:

Есть ли способ заставить поле ввода занимать всю ширину, как в примере ниже? Я пробовал с шириной: 100% и авто, но не повезло.

Ввод не может увеличиваться при добавлении текста. использовать атрибут contenteditable=true в div

— 08.12.2022 21:53

@Shury вся доступная ширина страницы или ширина, достаточная для отображения текста внутри

— 11.12.2022 13:37

css reactjs semantic-ui-react

08.12.2022 21:48

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

import React from "react";
import { Input, Form, Segment } from "semantic-ui-react";
import "./style.css";

const InputExampleFocus = () => (
  <Segment>
    <Form>
      <Form.Group style = {{ display: "flex" }}>
        <Form.Field style = {{ flexGrow: "1" }}>
          <Input placeholder = "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" />
        </Form.Field>
        <Form.Button color = "green" floated = "right" content = "Add new API key" />
      </Form.Group>
    </Form>
  </Segment>
);

export default InputExampleFocus;

Попробуйте это, я удалил класс .ui.AddAPIKey и использовал Inline css для стиля Form.Group и Form.Field