Css semanticuireact 使输入使用全宽度可用

发布于12月11日

我有以下Segment个

<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;
}

结果是:

有没有一种方法可以让输入字段像下面的例子一样采用整个宽度？我已经try 了宽度:100%和自动，但没有运气.

推荐答案

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;

try 一下，我删除了.ui.AddAPIKey类，并使用内联css设置Form.Group和Form.Field的样式