Form layout with Material-UI components

Question

What is the best way to lay out Material-UI components on a form? Do you use bootstrap classes such as "form-group" or "container-fluid" or is there a better way?

Thanks!

Answer 1

I strongly recommend you to use the Grid system for create your layout. Grid System

And add your custom css theme inside the 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>
  );
}

Feel free to comment if you need more information !