Reactjs 如何使用MaterialUI构建此布局？反应

我正在使用MaterialUI用React构建UI。 我想构建如下布局：

我正在处理网格的组件并四处玩，但需要帮助才能把那个专栏放在这里：c有什么想法吗？谢谢

其他详情： *我没有想过，如果你知道一种方法，使其移动将是有益的

---

谢谢

我承认这不是最性感的解决方案，但我相信最简单的方法是使用Material UI的各种表格组件创建两列，然后在第一列嵌套网格或表格。如果有人有更好的选择，请评论，这样我也可以学习

在我的示例代码段中，我重用了表组件来嵌套表。我没有得到的样式，以配合你的精确，但接近足够一个可行的起点

const{Table，TableBody，TableRow，TableCell}=window[“materialui”]；
常量NestedTableExample=（）=>{
constSharedColumnProps={border:“none”}；
常量sharedDivProps={
边框：“实心3px#000”，
高度：“100%”，
填充：“10px”，
宽度：“100%”
};
常量样式={
第1列：{宽度：“150px”，…sharedColumnProps}，
第1DIV列：{背景：“浅蓝色”…sharedDivProps}，
第2栏：{
宽度：“50px”，
…共享柱道具
},
第二栏第四：{
背景：“橙色”，
…sharedDivProps
}
};
返回(
第1单元
细胞2
第三单元
第四单元
);
};
ReactDOM.render（，document.getElementById（“app”）
请让我知道您实施了哪些措施但没有奏效。请分享相关代码，以便我们提供帮助