具有材质 UI 组件的窗体布局

Question

在

表单上布置 Material-UI 组件的最佳方式是什么？ 您是否使用诸如"表单组"或"容器流体"之类的引导类，或者是否有更好的方法？

谢谢！

Answer 1

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

并在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>
  );
}

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