如何让Semantic-UI-React的Input组件占满可用宽度？

我使用了Semantic-UI-React的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;
}

当前输入框未占满Segment宽度，尝试设置width:100%和width:auto均无效，希望实现输入框占满全部宽度的效果。

解决方法 #

问题根源在于Form.Group的默认布局，加上Segment设置的display:flex和justify-content: right，限制了输入框的宽度扩展。可以通过以下两种方式解决：

方式一：利用Semantic-UI内置属性（推荐）

直接使用组件自带的fluid和width属性，无需过多自定义样式：

<Segment className='AddAPIKey'>
  <Form>
    {/* 给Form.Group设置width="100%"确保占满Segment宽度 */}
    <Form.Group width="100%">
      {/* Form.Field设为width="100%"，Input添加fluid属性自适应容器 */}
      <Form.Field width="100%">
        <Input 
          placeholder='XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX' 
          fluid 
        />
      </Form.Field>
      <Form.Button color='green' content='Add new API key' />
    </Form.Group>
  </Form>
</Segment>

调整Segment样式，去掉影响布局的属性：

.ui.AddAPIKey {
  width: 100%; /* 确保Segment本身占满父容器 */
}

方式二：自定义CSS强制布局

如果需要更灵活的控制，通过CSS调整flex布局：

/* 让Segment作为垂直flex容器，占满宽度 */
.ui.AddAPIKey {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* 让Form.Group成为水平flex容器，占满宽度 */
.ui.AddAPIKey .form .form-group {
  display: flex;
  width: 100%;
  gap: 16px; /* 输入框和按钮之间的间距，可按需调整 */
}

/* 让输入框所在的Field填充剩余空间 */
.ui.AddAPIKey .form .form-group .field {
  flex: 1;
}

/* 强制Input占满Field宽度 */
.ui.AddAPIKey .form .form-group .field input {
  width: 100% !important;
}

两种方式都能实现输入框占满Segment宽度的效果，推荐第一种，更符合Semantic-UI的设计规范。

内容的提问来源于stack exchange，提问作者Shury