Перемещение элемента div с текстовым полем

Question

У меня есть кнопка «Добавить», которая дублирует мое поле, однако мне нужно, чтобы этот значок был в линию с моим текстовым полем, как показано ниже, я уже некоторое время возился с иконкой, и мне кажется, что она не может быть встроеннойЯ попытался добавить сетки и удалить, но все еще не повезло

Как вы видите, кнопка добавления должна соответствовать contactEmails, чтобы сделать ееболее визуально привлекательный

 {emails.map((email, i) => (
    <Grid item xs={12} sm={6}>
      <TextField
        className={classes.field}
        id="contactEmails"
        name="contactEmails"
        label="Contact Email(s)"
        fullWidth
        // onChange={change.bind(null, 'contactEmails')}
        autoComplete="lname"
        inputProps={{
          maxLength: 250
        }}
        value={emails[i]}
        onChange={e => setEmails(
          emails.map((email, j) => (i === j ? e.target.value : email))
        )}
      />
    </Grid>
  ))}
  <Fab className={classes.addButton} style={{ marginRight: 10, marginBottom: 10, backgroundColor: '#3B70BC', color: 'white' }} onClick={() => setEmails([...emails, ''])}> <Add /> </Fab>

 addButton: {
marginTop: theme.spacing.unit * 2,
color: '#3B70BC'
 }

Answer 1

• Удалите fullWidth свойство в вашем TextField и не используйте Grid.

Или

• Если вы хотите использовать Grid, вы должны поместить компонент <Fab> как item в Grid container. xs prop указывает пространство, которое компонент займет в общей шкале 12 точек для очень маленьких дисплеев. Если вы не укажете другие размеры, например sm или md, xs будет применяться ко всем размерам дисплея. Как это:

    <Grid container>
      <Grid item xs={9}>
        <TextField />
      </Grid>
      <Grid item xs={3}>
        <Fab />
      </Grid>
    </Grid>

Personnaly, я бы не использовал там Grid, я бы использовал flexbox .

Answer 2

Вам необходимо структурировать свои элементы внутри контейнера Grid, см. Сетка документы.

Поскольку вы не отображали весь связанный код, вот общий пример:

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

export default function App() {
  return (
    <Grid container spacing={3} style={{ margin: '1%' }}>
      <Grid item>
        <TextField />
      </Grid>
      <Grid item>
        <Fab />
      </Grid>
    </Grid>
  );
}