如何使用Material-UI将多个TextField元素放入Grid容器中？

Question

我使用Material-UI来设计我的前端。我对网格布局有疑问。我想放置7个TextField元素，但它们看起来重叠。如果我将所有7个TextField元素都从xs={1}更改为xs={2}，则会变得更大，并且它们不能放入一行。

如何将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

材料UI的网格支持auto-layout。使用裸断点属性（例如<Grid item xs >等效于<Grid item xs={true}>）表示使用自动布局功能。

下面的代码显示了两个网格。一种适用于所有尺寸的自动布局，一种适用于屏幕尺寸中等或更宽的自动布局，适用于小屏幕（通过sm={3}每行4个文本字段，适用于超小屏幕每行3个文本字段屏幕（通过xs={4}）。试一下不同尺寸的CodeSandbox，看看效果如何。

有关不同断点的大小，请参见https://material-ui.com/layout/breakpoints/#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}表示12个长度中的1个，因此，如果您有7个项目，则它不适合屏幕，因为它只有12个长度中的7个。但是，如果将长度增加到xs={2}，则长度为14，即12，因此它将溢出到下一行。

解决方案是仅针对此确切问题不使用网格系统，因为网格系统不适合您的情况，请使用自定义样式以及诸如带弹性框的自定义样式，而不使用网格系统。

如果具有2/3/4/6元素，则可以使用网格系统，并且可以轻松调整这些元素的大小。