Reactjs 使用材质UI嵌套网格

所以，我在让材质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;

从“React”导入React；
从“../layouts/default”导入DefaultLayout；
从“@material ui/core/Grid”导入网格；
类概要文件扩展了React.Component{
render（）{
返回(
{/*与下一行构成两列*/}
)}}
module.exports=配置文件；

目前，它正在呈现：

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

有人能破译我的密码出了什么问题吗

@材料界面/核心：^3.9.2

反应：^16.7.0

您需要使用和

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

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;

从“React”导入React；
从“../layouts/default”导入DefaultLayout；
从“@material ui/core/GridList”导入网格列表；
从“@material ui/core/gridlistile”导入GridListile；
类概要文件扩展了React.Component{
render（）{
返回(
)}}
module.exports=配置文件；

我认为问题在于，前两行用xs={12}标记，将占据整个页面宽度。我也在从bootstrap过渡（老兄…谁知道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

从“React”导入React；
从“../layouts/default”导入DefaultLayout；
从“@material ui/core/Grid”导入网格；
类概要文件扩展了React.Component{
render（）{
返回(
//下面的列将是全宽的！我已将12改为6
{/*与下一行构成两列*/}
)}}
module.exports=配置文件

---

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

你能告诉我们如何使列的宽度自定义吗？目前它使列的宽度相等。这样，只要你的道具设置为true，你就可以排除该值。不要使用

，只需使用