Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

273
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda