css 如何在Material UI React中设置Box组件内的项目宽度？

9wbgstp7 于 2023-06-07 发布在 React

关注(0)|答案(1)|浏览(197)

我使用React Material UI和它的Box组件来样式化我的表单。在我的情况下，我有4个项目，每行，但在最后一行，我需要显示3个项目，最后一个项目应填补行。换句话说，最后两个元素必须合并。当Box组件将我所有的行划分为4列时，我该怎么做？
我的代码：

<Box
    sx={{
       display: 'grid',
       columnGap: 2,
       rowGap: 3,
       gridTemplateColumns: {xs: 'repeat(7, 1fr)',
       sm: 'repeat(4, 1fr)'},
         }}
  >
first row with 4 columns:

    <TextField ....>
    <TextField ....>
    <TextField ....>
    <TextField ....>

second row with 3 columns:

    <TextField ....>
    <TextField ....>
    //This column should be spanned for two columns.
    <TextField ....>

</Box>

css

来源：https://stackoverflow.com/questions/75593528/how-to-set-items-width-inside-the-box-component-in-material-ui-react

1条答案

按热度按时间

unguejic1#

试试这个网格布局：

import * as React from "react";
import { Box, TextField } from "@mui/material";

export default function Grid() {
  return (
    <Box
      sx={{
        display: "grid",
        gridTemplateAreas: "'a1 a2 a3 a4' 'b1 b2 c c'"
      }}
    >
      {/* first row with 4 columns: */}
      <TextField style={{ gridArea: "a1" }} />
      <TextField style={{ gridArea: "a2" }} />
      <TextField style={{ gridArea: "a3" }} />
      <TextField style={{ gridArea: "a4" }} />
      {/* second row with 3 columns: */}
      <TextField style={{ gridArea: "b1" }} />
      <TextField style={{ gridArea: "b2" }} />
      {/* This column should be spanned for two columns. */}
      <TextField style={{ gridArea: "c" }} />
    </Box>
  );
}

赞(0）回复(0）举报 2023-06-07

我来回答

css 如何在Material UI React中设置Box组件内的项目宽度？

1条答案

相关问题

热门标签

最新问答