如何使用 Material UI 构建此布局？反应答案

【问题标题】：How can I build this layout with MaterialUI? React如何使用 Material UI 构建此布局？反应
【发布时间】：2019-05-15 07:13:43
【问题描述】：

我正在使用 MaterialUI 通过 React 构建我的 UI。我想构建这样的布局：

我正在处理 Grid 的组件并玩弄，但需要帮助来放置该列：c 有什么想法吗？谢谢。

其他细节： * 如果您知道一种使其移动的方法，我不认为响应式会有所帮助

谢谢！

【问题讨论】：

请让我知道您实施了什么但没有工作。请分享相关代码，以便我们提供帮助

标签： reactjs material-design material-ui

【解决方案1】：

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

在我的示例 sn-p 中，我重用了 Table 组件来嵌套表格。我没有让样式与您的精确匹配，但足够接近，可以作为一个可行的起点。

const { Table, TableBody, TableRow, TableCell } = window["material-ui"];

const NestedTableExample = () => {
  const sharedColumnProps = { border: "none" };
  const sharedDivProps = {
    border: "solid 3px #000",
    height: "100%",
    padding: "10px",
    width: "100%"
  };
  const styles = {
    column1: { width: "150px", ...sharedColumnProps },
    column1Div: { background: "lightblue", ...sharedDivProps },
    column2: {
      width: "50px",
      ...sharedColumnProps
    },
    column2Div: {
      background: "orange",
      ...sharedDivProps
    }
  };
  return (
    <Table style={{ height: "100%" }}>
      <TableBody>
        <TableRow>
          <TableCell style={{ border: "none" }}>
            <Table>
              <TableBody>
                <TableRow>
                  <TableCell style={styles.column1}>
                    <div style={styles.column1Div}>Cell1</div>
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell style={styles.column1}>
                    <div style={styles.column1Div}>Cell2</div>
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell style={styles.column1}>
                    <div style={styles.column1Div}>Cell3</div>
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </TableCell>
          <TableCell style={styles.column2}>
            <div style={styles.column2Div}>Cell4</div>
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
};

ReactDOM.render(<NestedTableExample />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@3.6.2/umd/material-ui.production.min.js"></script>
<div id="app"></div>

【讨论】：