Reactjs 如何在React片段元素中包装多个网格容器

结构- 假设一个

footer

元素返回以下JSX，然后我在

LoginPage

元素中使用

footer

元素

<React.Fragment>
[container1...(full width)]
[container2...(width- 60%)] [container3...(width- 40%)]
</React.Fragment>

[集装箱1…（全宽）]
[集装箱2…（宽度-60%）][集装箱3…（宽度-40%）]

我知道网格容器和项的概念，但这里我想用React

片段

元素包装所有容器，以便在

LoginPage

文件中的footer元素中应用特定属性。我该怎么做

虽然我可以转换项目中的所有3个容器，然后包装到一个新容器中，但这并不能满足我的要求

---

请建议其他材质UI布局容器（如果有的话）

不清楚您想做什么。如果您想将道具传递给页脚，可以通过传播在LoginPage.js中声明的道具来实现

    import React from "react";
    import Footer from "./footer";
    
    export default function SimpleContainer() {
      return (
          <Footer maxWidth="sm" style={{ height: "20vh" }}>
            More footer content
          </Footer>
      );
    }

LoginPage.js

    import React from "react";
    import Footer from "./footer";
    
    export default function SimpleContainer() {
      return (
          <Footer maxWidth="sm" style={{ height: "20vh" }}>
            More footer content
          </Footer>
      );
    }

从“React”导入React；
从“/Footer”导入页脚；
导出默认函数SimpleContainer（）{
返回(
更多页脚内容
);
}

Footer.js

    import React from "react";
    import Typography from "@material-ui/core/Typography";
    import Container from "@material-ui/core/Container";
    
    export default function Footer({ children, ...options }) {
      return (
        <React.Fragment>
          <Container {...options}>
            <Typography
              component="div"
              style={{ backgroundColor: "#cfe8fc", height: "100%" }}
            >
              Footer Container
            </Typography>
          </Container>
          {children}
        </React.Fragment>
      );
    }

从“React”导入React；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Container”导入容器；
导出默认函数页脚（{children，…options}）{
返回(
页脚容器
{儿童}
);
}

这里演示

---

如果这不是您想要的，请随意展开

请定义您的问题。示例代码需要更多上下文。问题还不清楚。