使用 box 组件和 sx prop 创建网格

Question

在 material UI v5 中，人们几乎可以用 sx 创建任何东西 prop, on the list is grid unfortunately I am unable to create what should be a simple grid. To illustrate here 就是我的网格的样子。

我尝试使用 Box 组件和 sx 道具的失败尝试看起来像 this

我在这里遗漏了什么，如何使用 Box/sx 组合重新创建网格组件的内容？

Answer 1

是你想要的吗？现场示例 sandbox ?

  <Box sx={{ placeContent: "center", display: "grid" }}>
      <Box sx={{ gridRow: "1", gridColumn: "div 1" }}>
        <TextField
          name="name"
          label="Name"
          variant="outlined"
          type="text"
          margin="dense"
        />
      </Box>
      <Box sx={{ gridRow: "2", gridColumn: "div 1" }}>
        <Autocomplete
          disablePortal
          id="combo-box-demo"
          options={top100Films}
          renderInput={(params) => <TextField {...params} label="Movie" />}
        />
      </Box>
    </Box>

使用 box 组件和 sx prop 创建网格

Creating a grid with the box component and sx prop

reactjs

material-ui

sx