使用 Material-UI 嵌套网格

IT技术 reactjs grid material-ui
2021-04-30 14:20:51

所以，我在让 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/核心：^3.9.2

react：^16.7.0

2个回答

我认为问题在于您的前两个“行”标有 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

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

您需要使用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;
其它你可能感兴趣的问题
上一篇create-react-app eintegrity 错误窗口 下一篇运行 tsc（TypeScript 编译器）时如何将 package.json 复制到 dist 或 build 文件夹中