Как разместить несколько элементов TextField в контейнере Grid с помощью Material-UI?

Question

Я использую Material-UI , чтобы создать свой внешний интерфейс.У меня есть вопрос, касающийся макета сетки.Я хочу поместить 7 элементов TextField, но они выглядят перекрытыми.Если я изменю xs={1} на xs={2} для всех 7 элементов TextField, то они станут намного больше, и они не уместятся в одну строку.

Как я могу разместить 7 элементов TextField в контейнере, регулируя размер автоматически?

<Grid container spacing={24}>
   <Grid item xs={1}>
      <TextField
          required
          id="holdingTime"
          className={this.props.styles.textField}
          onChange={(event) => this.props.handleChange("holdingTime", event)}
          value={this.props.state.holdingTime}
          margin="normal"
          label="Holding time"
          type="number"
          InputProps={{
             startAdornment: <InputAdornment position="start">(seconds)</InputAdornment>,
          }}
          onInput = {(e) =>{
             e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
          }}
     />
  </Grid>
</Grid>

Answer 1

Сетка Material-UI поддерживает автоматическое расположение .Использование оголенного свойства точки останова (например, <Grid item xs >, что эквивалентно <Grid item xs={true}>) указывает на использование функции автоматического размещения.

В приведенном ниже коде показаны две таблицы.Один использует автоматическую разметку для всех размеров, а другой - автоматическую разметку, когда размер экрана средний или более широкий, 4 текстовых поля в строке для маленьких экранов (через sm={3}) и 3 текстовых поля в строке для очень маленьких экранов (через xs={4}).Поиграйте с CodeSandbox разных размеров, чтобы увидеть это в действии.

См. https://material -ui.com / layout / breakpoints / # точки останова , чтобы узнать размеры различных точек останова.

import React from "react";
import ReactDOM from "react-dom";
import Grid from "@material-ui/core/Grid";
import TextField from "@material-ui/core/TextField";

function App({ classes }) {
  return (
    <>
      <div>This Grid is always auto-layout.</div>
      <Grid container spacing={24}>
        {[1, 2, 3, 4, 5, 6, 7].map(() => (
          <Grid item xs>
            <TextField required label="true" type="number" />
          </Grid>
        ))}
      </Grid>
      <br />
      <br />
      <div>
        This Grid changes the number of text fields per line as the screen size
        changes.
      </div>
      <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);

Answer 2

Сам я не использовал материал-интерфейс, но похоже, что система сетки похожа на систему начальной загрузки.

Исходя из моего понимания системы начальной загрузки, система сетки заблокирована правилом 12-сетки.Вы не можете поместить что-либо больше 12. Если оно больше 12, оно будет добавлено к следующей строке.

Для вашего вопроса xs={1} означает 1 из 12 длины, поэтому, если у вас есть 7 элементов,это не будет соответствовать экрану, поскольку у этого будет только 7 из 12 длин.Однако, если вы увеличите длину до xs={2}, у вас будет 14 из 12, поэтому она будет перетекать на следующую строку.

Решение состоит в том, чтобы просто не использовать систему сетки для этой конкретной задачи.так как система сетки не подходит для вашего случая, используйте собственный стиль с чем-то вроде flexbox без системы сетки.

Если у вас есть 2/3/4/6 элементов, вы можете использовать систему сетки, и выможно легко настроить размер для этих элементов.