Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

274
Vistas
Styling table made with formik and material UI grid - spacing

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

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda