时间戳

首页 > 解决方案 > 响应式和拆分式布局

reactjs - 响应式和拆分式布局

问题描述

我用react-splitter-layout和材质 ui库开始了一个项目。

我想找到一种方法来创建响应式组件，使用材质 ui Grid 或 Box 组件

我遇到了响应问题，我希望我的左侧面板能够根据容器的大小（而不是窗口大小）对 Grid 组件做出响应（使用 xs / md / lg），如下例所示，不是这种情况。它使用视口大小。（我知道这是正常的，因为媒体查询）。

这里的代码示例：https ://codesandbox.io/s/material-demo-i04rr?file=/demo.js （建议在新选项卡中打开渲染查看问题）

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import SplitterLayout from "react-splitter-layout";

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.secondary
  }
}));

export default function CenteredGrid() {
  const classes = useStyles();

  return (
    <SplitterLayout>
      <div className={classes.root}>
        <Grid container spacing={3}>
          <Grid item xs={4} md={6} lg={8}>
            <Paper className={classes.paper}>xs=3</Paper>
          </Grid>
          <Grid item xs={4} md={4} lg={2}>
            <Paper className={classes.paper}>xs=3</Paper>
          </Grid>
          <Grid item xs={4} md={2} lg={2}>
            <Paper className={classes.paper}>xs=3</Paper>
          </Grid>
        </Grid>
      </div>
      <div>Panel 2</div>
    </SplitterLayout>
  );
}

有人有解决这个问题的方法吗？

此致，

编辑 我还发布在材料 ui github https://github.com/mui-org/material-ui/issues/25189

标签： reactjsmaterial-uiresponsive

解决方案

这是我开始使用 material-UI 或任何 CSS 框架时的问题之一。

Material-UI 目前几乎支持你需要特别是响应式的情况，我从不使用任何其他库/框架来进行响应式。首先，您知道所有xs, sm,md都基于屏幕大小，而不是它们的容器。

那么，这里的问题是你是怎么称呼“容器”的？当您使用 Material-UI 时，您应该根据屏幕大小而不是特定的容器来布局所有内容。因为您所考虑的“容器”在响应中没有任何意义。它只是帮助您解决布局问题。

老实说，只要换个思路，用 Material-UI 的方式思考，关于响应式的一切都会变得容易。

推荐阅读