Получение кнопки и поля ввода в одну строку

Question

Я создаю форму, в которой я извлекаю некоторые данные из базы данных моей компании, но поля не совпадают в одной строке. В исходном коде использовалось пользовательское изображение для удаления полей, но оно никогда не оставалось встроенным. Я попытался создать новую версию, где 4 поля были бы встроены в кнопку удаления. Это то, что я имею до сих пор.

import React from "react";
import ReactDOM from "react-dom";
import Grid from "@material-ui/core/Grid";
import TextField from "@material-ui/core/TextField";
import DeleteIcon from "@material-ui/icons/Delete";
import IconButton from "@material-ui/core/IconButton";
import { makeStyles } from "@material-ui/core/styles";

import "./styles.css";

const useStyles = makeStyles(theme => ({
  button: {
    margin: theme.spacing(1)
  }
}));

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

  return (
    <>
      <div>This Grid is always auto-layout.</div>
      <Grid container spacing={10}>
        {/* {[1, 2, 3, 4, 5, 6, 7].map(() => ( */}
        <Grid item form="maincomponent" xs>
          <TextField required label="true" type="number" />
          <TextField required label="true" type="number" />
          <TextField required label="true" type="number" />
          <TextField required label="true" type="number" />
          <IconButton
            color="secondary"
            className={classes.button}
            aria-label="delete"
          >
            <DeleteIcon />
          </IconButton>
        </Grid>
        {/* ))} */}
      </Grid>
      {/* <br />
      <br />
      <Grid container spacing={24}>
        {[1, 2, 3, 4, 5, 6, 7].map(() => (
          <Grid item xs={4} sm={3} md>
            <TextField required label="4/3/true" type="number" />
          </Grid>
        ))}
      </Grid> */}
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Я выбрал это из учебника и изменил его в соответствии со своими потребностями. До сих пор я пытался манипулировать исходным кодом (не могу публиковать здесь, так как его балансовая единица), используя следующие параметры сетки: alignContent, alignItems, justify и justifyContent. Когда я не смог достичь желаемого эффекта, я попытался манипулировать sm и xs в Field Tag из material-ui. Я не очень хорошо понимаю это (первая работа) и был бы признателен за любое направление. Я прочитал API, и, к сожалению, он дает такое же описание для атрибута с двойным алфавитом [lg, md, sm, xl, xs] .

Благодарим за любую помощь!

Я пытался работать с кодом на CodeSandbox .

Answer 1

Во внутреннем теге Grid вы можете просто присвоить ему класс с некоторыми стилями flex. Это заставит все дочерние элементы быть в одной строке.

Компонент

  <Grid container spacing={10}>
    {/* {[1, 2, 3, 4, 5, 6, 7].map(() => ( */}
    <Grid className="d-flex" item form="maincomponent" xs>
      <TextField required label="true" type="number" />
      <TextField required label="true" type="number" />
      <TextField required label="true" type="number" />
      <TextField required label="true" type="number" />
      <IconButton
        color="secondary"
        className={classes.button}
        aria-label="delete"
      >
        <DeleteIcon />
      </IconButton>
    </Grid>
    {/* ))} */}
  </Grid>

CSS

.d-flex{
   display: flex
}

Смотрите песочницу: https://codesandbox.io/s/frosty-pine-4kzs7