Проблема с выравниванием и интервалом с TextField с вариантом, изложенным в FormControl. React и MaterialUI - PullRequest
1 голос
/ 23 января 2020

У меня возникла какая-то проблема с выравниванием и интервалом в Форме Реакта, которую я строю.

Sceenshot формы

Как вы можете видеть , похоже, что текстовое поле правильно выровнено, но оно игнорирует контур.

Я бы хотел, чтобы контур рассматривался как интервал, а не само текстовое поле.

Чего мне не хватает?

Вот код, который я использую.

Мой компонент DescriptionControl

import { TextField, FormControl } from '@material-ui/core';
import React from 'react';

export const DescriptionControl = ({ className, ...textFieldAttrs }) => (

  <FormControl fullWidth className>
    <TextField
      label="Description"
      type="description"
      name="description"
      variant="outlined"
      multiline
      {...textFieldAttrs}
    />
  </FormControl>
);

Сама форма

 <form onSubmit={articleSaveHandle}>

  <Grid container spacing={2}>
    <Grid container direction="row">
      <Grid container item xs={4}>
        <TitleControl
          className={classes.formControl}
          value={title}
          onChange={formInputChanged}
          helperText={(terrors.title || []).join(',')}
          required
        />
      </Grid>
      <Grid container item xs={4}>
        <FormControl className={classes.formControl} fullWidth>
          <InputLabel id="article-category-label">Catégorie</InputLabel>
          <SelectArticleCategory
            value={category}
            changed={formInputChanged}
            categoryList={useArticleCategories}
          />
        </FormControl>
      </Grid>
    </Grid>

    <Grid container direction="row">
      <Grid container item xs={8}>
        <DescriptionControl
          className={classes.formControl}
          value={description}
          onChange={formInputChanged}
          helperText={(terrors.description || []).join(',')}
        />
      </Grid>
    </Grid>
    <br/>
    <Grid container direction="row">
      <Grid item>
        <Button
          variant="contained"
          color="primary"
          onClick={articleSaveHandle}
        >
          {id && 'Modifier'}
          {!id && 'Ajouter'}
        </Button>
      </Grid>
    </Grid>
  </Grid>
</form>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...