使用 Material-UI 组件的表单布局答案

【问题标题】：Form layout with Material-UI components使用 Material-UI 组件的表单布局
【发布时间】：2016-02-26 17:51:01
【问题描述】：

在表单上布置 Material-UI 组件的最佳方式是什么？您使用引导类，例如“form-group”或“container-fluid”还是有更好的方法？

谢谢！

【问题讨论】：

标签： twitter-bootstrap reactjs material-ui form-layout

【解决方案1】：

我强烈建议您使用网格系统来创建布局。 Grid System

并在makeStyles 中添加您的自定义css 主题。 makeStyles API

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import {Grid, TextField} from '@material-ui/core';

const useStyles = makeStyles((theme) => ({
  root: {
    '& > *': {
      margin: theme.spacing(1),
      width: '25ch',
    },
  },
}));

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

  return (
   <Grid container
     direction="column"
     justify="center"
     alignItems="center"
    >
    <Grid item xs={12} md={12} lg={12} xl={12} sm={12}>
      <form className={classes.root} noValidate autoComplete="off">
        <TextField id="standard-basic" label="Standard" />
        <TextField id="filled-basic" label="Filled" variant="filled" />
        <TextField id="outlined-basic" label="Outlined" variant="outlined" />
      </form>
    </Grid>
   </Grid>
  );
}

如果您需要更多信息，请随时发表评论！

【讨论】：