twitter-bootstrap - 使用 Material-UI 组件的表单布局

Question

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

谢谢！

Answer 1

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

并将您的自定义 css 主题添加到makeStyles. 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>
  );
}

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