0

tengo dos formularios, uno al lado del otro y en la parte de arriba tengo un Card, pero me queda como metido en la parte de arriba y casi no se ve, ¿me podría ayudar por favor para que se vea completo?

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: theme.spacing(2),
    height: '250px',

    '& .MuiTextField-root': {
      margin: theme.spacing(1),
      width: '250px',
    },
    '& .MuiButtonBase-root': {
      margin: theme.spacing(2),
    },
  },
  rootCard: {
    minWidth: 275,
  },  
  title: {
    fontSize: 14,
  },  
  grid: {
    padding: theme.spacing.unit * 2,
    textAlign: 'center',
    color: theme.palette.text.secondary,    
  },
}));

const MyForm = () => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Grid container spacing={24}>

        <Grid className={classes.grid} item xs={12}>
          <Paper className={classes.paper}>
            <TheCard />
          </Paper>
        </Grid>

        <Grid className={classes.grid} item xs={6} sm={5}>
          <Paper elevation={3} className={classes.paper}>
            <Password />
          </Paper>
        </Grid>
        <Grid className={classes.grid} item xs={6} sm={5}>
          <Paper elevation={3} className={classes.paper}>
            <Buy />            
          </Paper>
        </Grid>
        
      </Grid>
    </div>
  );
};


function Password({ handleClose }) {
  const classes = useStyles();
  const { handleSubmit, control } = useForm();

  const onSubmit = data => {
    console.log(data);
  };

  return (
    <div>
      <form className={classes.root} onSubmit={handleSubmit(onSubmit)}>
        <Controller
          name="password"
          control={control}
          defaultValue=""
          render={({ field: { onChange, value }, fieldState: { error } }) => (
            <TextField
              label="Password"
              variant="filled"
              value={value}
              onChange={onChange}
              error={!!error}
              helperText={error ? error.message : null}
              type="password"
            />
          )}
          rules={{ required: 'Password required' }}
        />
        <Controller
          name="repeatPassword"
          control={control}
          defaultValue=""
          render={({ field: { onChange, value }, fieldState: { error } }) => (
            <TextField
              label="Repetir Password"
              variant="filled"
              value={value}
              onChange={onChange}
              error={!!error}
              helperText={error ? error.message : null}
              type="password"
            />
          )}
          rules={{ required: 'Password required' }}
        />
        <div>
          <Button type="submit" variant="contained" color="primary">
            Actualizar contraseña
        </Button>
        </div>
      </form>
    </div>
  );
}

function Buy({ handleClose }) {
  const classes = useStyles();
  const { handleSubmit, control } = useForm();

  const onSubmit = data => {
    console.log(data);
  };

  return (
    <div>
      <form className={classes.root} onSubmit={handleSubmit(onSubmit)}>
        <Controller
          name="lastName"
          control={control}
          defaultValue=""
          render={({ field: { onChange, value }, fieldState: { error } }) => (
            <Button type="button" variant="contained" color="primary">
              Plan Bronze
            </Button>
          )}
          rules={{ required: 'Last name required' }}
        />
        <Controller
          name="email"
          control={control}
          defaultValue=""
          render={({ field: { onChange, value }, fieldState: { error } }) => (
            <Button type="button" variant="contained" color="primary">
              Plan Plata
            </Button>
          )}
          rules={{ required: 'Email required' }}
        />
        <Controller
          name="password"
          control={control}
          defaultValue=""
          render={({ field: { onChange, value }, fieldState: { error } }) => (
            <Button type="button" variant="contained" color="primary">
              Plan Oro
            </Button>
          )}
          rules={{ required: 'Password required' }}
        />
        <div>
          <Button type="submit" variant="contained" color="primary">
            Comprar
        </Button>
        </div>
      </form>
    </div>
  );
 }

  function TheCard() {    
    const classes = useStyles();

    return (
      <div>
        <Card className={classes.rootCard}>
          <CardContent>
            <Typography className={classes.title} gutterBottom>
              Configuración
            </Typography>
          </CardContent>
        </Card>
      </div>
    );
}


  export default MyForm;

La idea es que quede el título arriba y los dos formularios abajo juntos.

El Card no entiendo por qué queda arriba... hay un estilo global de material ui que hace eso? hay algo que yo deba cambiar?

Les agradezco mucho cualquier ayuda que me puedan dar sobre el tema.

1 respuesta 1

0

Solución: quitar el heigth del primer estilo y hacer que el Card tenga el estilo root.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.