RaFormInput 宽度似乎总是 256px答案

【问题标题】：RaFormInput width always seems to be 256pxRaFormInput 宽度似乎总是 256px
【发布时间】：2020-12-03 08:06:52
【问题描述】：

我有下面的选项卡式表单，无论我设置什么内容（网格、框等），父表单的宽度始终为 256 像素

html 元素是 MuiContainer-root RaFormInput-input-61 但它始终是具有此限制的 RaFormInput。我在这里有什么明显的遗漏吗？

<Edit {...props} title={<ClientTitle />}>
  <TabbedForm>
    <FormTab label="details">
      <Container maxWidth={false}>
        <Grid container className={classes.root} spacing={2}>
          <Grid container direction="row">
            <Typography variant="h6" gutterBottom>
              {translate('resources.clients.fieldGroups.identity')}
            </Typography>
          </Grid>
          <Grid container direction="row" justify="flex-start" alignItems="center" spacing={2}>
            <Grid item>
              <TextInput source="firstname" resource="clients" validate={requiredValidate} fullWidth />
            </Grid>
            <Grid item>
              <TextInput source="lastname" resource="clients" validate={requiredValidate} fullWidth />
            </Grid>
          </Grid>
        </Grid>
      </Container>
    </FormTab>
    <FormTab label="referrals">
      <AddNewReferralButton record={props.record} />
      <ReferenceManyField reference="referrals" target="clientid" addLabel={false}>
        <Datagrid>
          <TextField label="Name" source="name" />
          <TextField label="Status" source="status" />
          <EditButton />
        </Datagrid>
      </ReferenceManyField>
    </FormTab>
  </TabbedForm>
</Edit>

【问题讨论】：

标签： reactjs material-ui react-admin react-final-form

【解决方案1】：

是的，你是。

SimpleForm docs 声明：

<SimpleForm> 逐行渲染其子组件（在
组件）。它接受 **Input** 和 **Field** 组件作为孩子们。

文档下面的 TabbedForm 部分解释说它与 SimpleForm 具有相同的行为，除了：

但是，该组件呈现按选项卡分组的输入。

Mui Container / Grid /Box 组件既不是 ra 输入也不是 ra 字段。您要做的是构建一个自定义表单布局，这是通过FormWithRedirect 组件read here 实现的，或者您可以完全通过您自己的以下react-final-form 文档来完成。

【讨论】：