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

Question

I'm using MaterialUI to build my UI with React. I want to build a layout like this:

I'm handling with the Grid's components and playing around but need help to put that column :c any idea? Thanks.

Additional Details: * I've not thought in a responsive if you know a way to make it mobile it would be helpful

Thanks!

Answer 1

I'll grant that it's not the sexiest solution, but I believe the easiest route would be to use Material-UI's various Table components to create two columns and then nest your grid or a table in the first column. If someone has a better alternative, please comment so I can learn, too!

In my example snippet, I reused the Table components to nest a table. I didn't get the styling to match yours precisely but close enough for a workable starting point.

 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>