Twitter bootstrap 具有材质UI组件的表单布局

在表单上布置材质UI组件的最佳方式是什么？您是否使用诸如“FormGroup”或“container fluid”之类的引导类，或者有更好的方法吗

---

谢谢

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

并在

makeStyles

中添加自定义css主题

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core”导入{Grid，TextField}；
const useStyles=makeStyles（（主题）=>({
根目录：{
'& > *': {
边距：主题。间距（1），
宽度：'25ch'，
},
},
}));
导出默认函数BasicTextFields（）{
const classes=useStyles（）；
返回(
);
}

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

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