使用 Material-UI 嵌套网格

Posted 2023-02-22

【中文标题】使用 Material-UI 嵌套网格

【英文标题】：Nesting Grid with Material-UI

【发布时间】：2019-07-10 04:23:23

【问题描述】：

所以，我在让 material-ui 网格按我想要的方式工作时遇到了问题。我正在尝试用两列呈现一行。

import React from 'react';
import DefaultLayout from '../layouts/default';
import Grid from '@material-ui/core/Grid';

class profile extends React.Component 
  render() 

    return (
    <React.Fragment>
      <Grid container spacing=8>
      <Grid item xs=12 style=backgroundColor: 'blue', height: '250px'></Grid>
      <Grid item xs=12 style=backgroundColor: 'grey', height: '250px'></Grid>

      /* Form two columns with next row*/

      <Grid container='true' item sx=12>
        <Grid item='true' xs=6 md=8 style=backgroundColor: 'green', height: '50px'></Grid>
        <Grid item='true' xs=6 md=4 style=backgroundColor: 'orange', height: '50px'></Grid>
      </Grid>
    </Grid> 
  </React.Fragment>
)

module.exports = profile;

目前正在渲染：

我希望橙色和绿色的行是同一行的两列。并排。

谁能破译我的代码有什么问题？

@material-ui/core: ^3.9.2

反应：^16.7.0

【参考方案1】：

我认为问题在于您的前两个“行”标有 xs=12 并将占据整个页面宽度。我也正在退出引导程序（伙计……谁知道 react-bootstrap 会这么麻烦！）这有点调整……但如果你没弄明白，试试这个？

import React from 'react';
import DefaultLayout from '../layouts/default';
import Grid from '@material-ui/core/Grid';

class profile extends React.Component 
  render() 

    return (
    <React.Fragment>
      <Grid container spacing=8>
      //the below columns will be full width! I've changed the 12 to 6
      <Grid item xs=6 style=backgroundColor: 'blue', height: '250px'></Grid>
      <Grid item xs=6 style=backgroundColor: 'grey', height: '250px'></Grid>

      /* Form two columns with next row*/

      <Grid container='true' item sx=12>
        <Grid item='true' xs=6 md=8 style=backgroundColor: 'green', height: '50px'></Grid>
        <Grid item='true' xs=6 md=4 style=backgroundColor: 'orange', height: '50px'></Grid>
      </Grid>
    </Grid> 
  </React.Fragment>
)

module.exports = profile

我还没有测试过，但应该可以吗？

【讨论】：

fwiw，只要你有一个设置为 true 的道具，你就可以排除这个值。而不是<Grid item='true'>，只需使用<Grid item>

【参考方案2】：

您需要使用GridList 和GridListTitle。

请尝试使用以下代码以获得所需的输出

import React from 'react';
import DefaultLayout from '../layouts/default';
import GridList from "@material-ui/core/GridList";
import GridListTile from "@material-ui/core/GridListTile";

class profile extends React.Component 
  render() 

    return (
    <React.Fragment>
      <GridList cols=1>
          <GridListTile style=backgroundColor: 'green', height: '50px'>

          </GridListTile>
          <GridListTile style=backgroundColor: 'orange', height: '50px'>

          </GridListTile>
      </GridList>
      <GridList cols=2>
          <GridListTile style=backgroundColor: 'green', height: '50px'>

          </GridListTile>
          <GridListTile style=backgroundColor: 'orange', height: '50px'>

          </GridListTile>
      </GridList>

  </React.Fragment>
)

module.exports = profile;

【讨论】：

你能告诉我们如何使列自定义宽度吗？目前它使等宽列