i'm builde form using formik and material-ui. everything works well. i do have an issue in the styling, my form do not use the full horizontal space. here's my code:
and a view of what's render:
<Grid container
direction="row"
justifyContent="space-evenly"
alignItems="center">
<Grid item xs={12}>
<ContentHeader name='Add Driver' style = {toolbarStyle} />
</Grid>
<Grid item xs={12}>
<Container maxWidth='md'>
<div className={classes.formWrapper}>
<Formik
initialValues={{
...INITIAL_FORM_STATE
}}
validationSchema={FORM_VALIDATION}
onSubmit={(values) => {
console.log(values);
}}
>
<Form>
<Grid container spacing={4}>
<Grid item xs={12}>
<Typography>Driver details</Typography>
</Grid>
<Grid item xs={4}>
<UITextfield name='firstName' label='First Name' />
</Grid>
<Grid item xs={4}>
<UITextfield name='lastName' label='Last Name' />
</Grid>
<Grid item xs={4}>
<UITextfield name='email' label='Email' />
</Grid>
the Styling:
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
formWrapper: {
marginTop: theme.spacing(5),
marginBottom: theme.spacing(8)
}
}));
const toolbarStyle = {
backgroundColor: "#ffca28"
}
the view the space right and left is the issue THx for the help