У меня возникла какая-то проблема с выравниванием и интервалом в Форме Реакта, которую я строю.
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>