如何更改此材质 UI 表单的布局？答案

【问题标题】：how can I change the layout of this material UI form?如何更改此材质 UI 表单的布局？
【发布时间】：2021-06-10 17:41:57
【问题描述】：

我有一个使用 Material UI 制作的结帐表单，如下所示：

这似乎很小，但我想更改布局，以便名字和姓氏等都在同一行，看起来更像这样（但我不确定如何去做）：

这是我的地址表单组件的代码：

return (
    <>
      <Typography variant="h6" gutterBottom>
        Shipping address
      </Typography>
      <FormProvider {...methods}>
        <form
          onSubmit={methods.handleSubmit((data) =>
            test({
              ...data,
              shippingCountry,
              shippingSubdivision,
              shippingOption,
            })
          )}
        >
          <Grid container spacing={3}>
            <FormInput required name="firstName" label="First name" />
            <FormInput required name="lastName" label="Last name" />
            <FormInput required name="address1" label="Address line 1" />
            <FormInput required name="email" label="Email" />
            <FormInput required name="city" label="City" />
            <FormInput required name="zip" label="Zip / Postal code" />
            <Grid item xs={12} sm={6}>
              <InputLabel>Shipping Country</InputLabel>
              <Select
                value={shippingCountry}
                fullWidth
                onChange={(e) => setShippingCountry(e.target.value)}
              >
                {Object.entries(shippingCountries)
                  .map(([code, name]) => ({ id: code, label: name }))
                  .map((item) => (
                    <MenuItem key={item.id} value={item.id}>
                      {item.label}
                    </MenuItem>
                  ))}
              </Select>
            </Grid>
            <Grid item xs={12} sm={6}>
              <InputLabel>Shipping Subdivision</InputLabel>
              <Select
                value={shippingSubdivision}
                fullWidth
                onChange={(e) => setShippingSubdivision(e.target.value)}
              >
                {Object.entries(shippingSubdivisions)
                  .map(([code, name]) => ({ id: code, label: name }))
                  .map((item) => (
                    <MenuItem key={item.id} value={item.id}>
                      {item.label}
                    </MenuItem>
                  ))}
              </Select>
            </Grid>
            <Grid item xs={12} sm={6}>
              <InputLabel>Shipping Options</InputLabel>
              <Select
                value={shippingOption}
                fullWidth
                onChange={(e) => setShippingOption(e.target.value)}
              >
                {shippingOptions
                  .map((sO) => ({
                    id: sO.id,
                    label: `${sO.description} - (${sO.price.formatted_with_symbol})`,
                  }))
                  .map((item) => (
                    <MenuItem key={item.id} value={item.id}>
                      {item.label}
                    </MenuItem>
                  ))}
              </Select>
            </Grid>
          </Grid>
          <br />
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <Button component={Link} variant="outlined" to="/cart">
              Back to Cart
            </Button>
            <Button type="submit" variant="contained" color="primary">
              Next
            </Button>
          </div>
        </form>
      </FormProvider>
    </>
  );
};

还有我的自定义文本字段组件：

import React from "react";
import { TextField, Grid } from "@material-ui/core";
import { useFormContext, Controller } from "react-hook-form";

const FormInput = ({ name, label, required }) => {
  const { control } = useFormContext();
  const isError = false;

  return (
    <>
      <Controller
        control={control}
        name={name}
        render={({ field }) => <TextField fullWidth label={label} required />}
      />
    </>
  );
};

export default FormInput;

【问题讨论】：

你已经完成了运输国家和运输细分。你可以照着做。使用 <Grid item /> 并使用 6 作为 sm 、 md 等断点。由于材料 ui 遵循 12 列网格，给 6 将给您 2 列。

标签： reactjs material-ui

【解决方案1】：

看起来您已经在使用 Mui Grid，所以我认为您需要将 <FormInput/> 组件放在 <Grid item/> 组件中。像这样：

<Grid container>
  <Grid container direction="row">
    <Grid item xs={6} sm={6}>
      <FormInput required name="firstName" label="First name" />
    </Grid>
    <Grid item xs={6} sm={6}>
      <FormInput required name="lastName" label="Last name" />
    </Grid>
  </Grid>

  ...Another Grid row, and so on...

</Grid>

【讨论】：