RaFormInput 宽度似乎总是 256px

Question

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

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>

Answer 1

是的，你是。

SimpleForm docs 说明：

The <SimpleForm> renders its child components line by line (within
components). It accepts **Input** and **Field** components as children.

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

However, the component renders inputs grouped by tab.

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

RaFormInput 宽度似乎总是 256px

RaFormInput width always seems to be 256px

reactjs

material-ui

react-final-form

react-admin