Блог

Я разрабатываю React js приложение с использованием Material ui components .

У меня 2 столбца grid , в каждом столбце по 4 textField .

Некоторые из них textField включены в Autocomplete компонент.

Проблема в том, что у них разные стили, поэтому они не выровнены друг с другом.

Вот скриншот результата

Как вы можете заметить, проблема во второй и третьей строке левого столбца.

Вот мой код

 <Grid container style={{ width: "100%", marginTop: 10 }}>
   <Grid item style={{ padding: 10 }} xs={12} sm={12} md={6}>
       <TextField
        className={`${classes.textfield}  ${
          values.nameError amp;amp; classes.inputError
        }`}
        onFocus={(e) => setValues({ ...values, nameError: false })}
        onChange={(e) => setValues({ ...values, name: e.target.value })}
        error={values.nameError}
        helperText={values.nameError ? t("Obligatoire") : ""}
        margin="normal"
        fullWidth
        type="text"
        value={values.name}
        label={t("nomFR")   " *"}
        autoComplete="given-name"
      />
      //Same for the rest  
   </Grid>
   <Grid item style={{ padding: 10 }} xs={12} sm={12} md={6}>
      <SelectInputWrapper>
        <FormControl fullWidth>
          <Autocomplete
            options={spaces}
            getOptionLabel={(option) => option.label}
            renderOption={(option, { selected }) => (
              <div className={classes.menuItem}>{option.label} </div>
            )}
            value={values.espace}
            disableClearable
            renderInput={(params) => (
              <TextField
                {...params}
                error={values.espaceError}
                onFocus={(e) =>
                  setValues({ ...values, espaceError: false })
                }
                style={{ marginLeft: 3, marginRight: 3 }}
                margin="normal"
                value={""}
                label={t("Espace")   " *"}
              />
            )}
          />
          {values.espaceError amp;amp; (
            <FormHelperText className={classes.helper} error={true}>
              {t("Obligatoire")}
            </FormHelperText>
          )}
        </FormControl>
      </SelectInputWrapper>
      //Same for the rest 
   </Grid>
</Grid>
 

Обратите внимание, я не даю никаких полей или отступов.

Есть ли решение, пожалуйста? Я застрял здесь на 2 дня.