问使用Material创建带有标签、文本、选择和按钮元素的内联表单(类似于Boostrap)

EN

import React, { useState } from "react";
import "./style.css";
import classNames from "classnames";
import { makeStyles } from "@material-ui/core/styles";
import {
  Button,
  FormControl,
  OutlinedInput,
  TextField,
  Typography,
  Select,
  MenuItem
} from "@material-ui/core";

export default function App() {
  const classes = useStyles();

  const fields = ["FirstName", "LastName", "PostCode", "Gender"];
  const [searcBy, setSearchBy] = useState("FirstName");
  const [searchText, setSearchText] = useState("");

  return (
    <div className={classes.root}>
      <form className={classes.form}>
        <FormControl className={classNames(classes.formControl, classes.text)}>
          <Typography variant="body1" className={classes.type}>
            Select search fields:
          </Typography>
        </FormControl>
        <FormControl
          className={classNames(classes.formControl, classes.select)}
        >
          <Select
            labelId="typesLabel"
            label="Types"
            input={<OutlinedInput classes={{ input: classes.input }} />}
            value={searcBy}
            onChange={e => setSearchBy(e.target.value)}
          >
            {fields.map(field => (
              <MenuItem key={field} value={field}>
                {field}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
        <FormControl
          className={classNames(classes.formControl, classes.search)}
        >
          <TextField
            label="Enter search pattern"
            variant="outlined"
            size="small"
            value={searchText}
            onChange={e => setSearchText(e.target.value)}
          />
        </FormControl>
        <Button
          type="submit"
          variant="contained"
          color="primary"
          className={classes.submitBtn}
        >
          Primary
        </Button>
      </form>
    </div>
  );
}

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center"
  },
  form: {
    width: 800,
    display: "flex",
    flexWrap: "wrap",
    justifyContent: "center",
    alignItems: "center"
  },
  container: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center"
  },
  text: {
    minWidth: 120
  },
  type: {
    fontWeight: 600
  },
  formControl: {
    marginRight: theme.spacing(1),
    [theme.breakpoints.down("xs")]: {
      minWidth: "100%",
      marginRight: theme.spacing(0),
      marginBottom: theme.spacing(1)
    }
  },
  input: {
    padding: "10px 14px"
  },
  select: {
    maxWidth: 130
  },
  search: {
    maxWidth: 180
  },
  submitBtn: {
    [theme.breakpoints.down("xs")]: {
      width: "100%"
    }
  }
}));