css - 如何使用 Formik、Material-ui/core 和 formik-materia-ui 包装表单字段？

Question

我使用 Formik 在 React 中创建了一个表单，并使用 Material-UI 进行设计。出于某种原因，我绝对无法包装这些字段。具体来说，我希望州和国家在一条线上，邮编和电话在一条线上。在移动设备上，表单很好，每个字段都是全角的。然而，在桌面上，表单坚持显示在一列中，上述字段的宽度为半角或更小。

表格：

import React, { useState } from "react";
import { Alert } from "react-bootstrap";
import { Formik, Form, Field, ErrorMessage } from "formik";
import { CheckboxWithLabel, TextField } from "formik-material-ui";
import { ThemeProvider, Grid } from "@material-ui/core";
import { baseTheme, chooseMFATheme } from "../styles/MuiTheme";


export default function AddNewGroup() {

  return (
    <div className="create-new-group">
      <h2>Create a New Group:</h2>
      <ThemeProvider theme={baseTheme}>
        <Formik
          key="create-group"
          initialValues={{ // initial values }}
          validationSchema={object({ // validation schema })}
          onSubmit={ // submit form}
        >
          {({ errors, touched }) => (
            <Grid container spacing={2}>
              <Grid container item>
                <Form className="create-group-form">
                  <Grid item xs={12} md={12}>
                    <Field
                      component={TextField}
                      label="Company Name"
                      type="text"
                      name="companyName"
                      autoFocus
                    />
                    <ErrorMessage
                      className="errorMsg"
                      component="div"
                      name="companyName"
                    />
                  </Grid>

                  <Grid item xs={12}>
                    <Field
                      component={TextField}
                      label="Billing Address"
                      type="text"
                      name="billingAdd1"
                    />
                    <ErrorMessage
                      className="errorMsg"
                      component="div"
                      name="billingAdd1"
                    />
                  </Grid>

                  <Grid item xs={12}>
                    <Field
                      component={TextField}
                      type="text"
                      label="Billing City"
                      name="billingCity"
                    />
                    <ErrorMessage
                      className="errorMsg"
                      component="div"
                      name="billingCity"
                    />
                  </Grid>

                  <Grid item xs={12} sm={5}>
                    <Field
                      component={TextField}
                      select
                      defaultValue="Choose"
                      label="Billing State / Province"
                      name="billingStateProv"
                    >
                      <option>Choose State/Prov</option>
                      {state_prov_arr.map((local) => (
                        <option
                          className="billing-row"
                          key={local.abbr}
                          value={local.abbr}
                        >
                          {local.name}
                        </option>
                      ))}
                    </Field>
                    <ErrorMessage
                      className="errorMsg"
                      component="div"
                      name="billingStateProv"
                    />
                  </Grid>

                  <Grid item xs={12} sm={5}>
                    <Field
                      component={TextField}
                      type="select"
                      label="Country"
                      select
                      name="billingCountry"
                    >
                      <option defaultValue="choose country">
                        Choose Country
                      </option>
                      {countries.map((country) => (
                        <option
                          className="billing-row"
                          key={country}
                          value={country}
                        >
                          {country}
                        </option>
                      ))}
                    </Field>
                    <ErrorMessage
                      className="errorMsg"
                      component="div"
                      name="billingCountry"
                    />
                  </Grid>

                  <Grid item xs={12} sm={4}>
                    <Field
                      component={TextField}
                      label="Zip / Postal Code"
                      type="text"
                      name="billingZipPost"
                    />
                    <ErrorMessage
                      className="errorMsg"
                      component="div"
                      name="billingZipPost"
                    />
                  </Grid>

                  <Grid item xs={12} sm={6}>
                    <Field
                      component={TextField}
                      type="phone"
                      label="Billing Phone"
                      name="billingPhone"
                    />
                  </Grid>

                  <button type="submit" className="common-btn" size="lg">
                    {!isSubmitting ? "Create" : <LoaderLib size={"2x"} />}
                  </button>
                </Form>
              </Grid>
            </Grid>
          )}
        </Formik>
      </ThemeProvider>
    </div>

CSS：

    width: 85%;
    margin: auto;
    padding-bottom: 3%;
  }

MUI 主题编辑：

    MuiTextField: {
      variant: "outlined",
      fullWidth: true,
      margin: "dense",
      InputLabelProps: {},
    },
    MuiInputLabel: {
      shrink: true,
    }

并且 MUI Grid-container 有一个默认值：

.MuiGrid-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}