Question

我正在尝试了解Material-UI @ next网格布局系统。

我的目标是让两张纸张在整个宽度屏幕上展开，并在屏幕变小到一张纸张时断开。 documentation包含以下代码段：

  <Container>
    <Grid container spacing={24}>
      <Grid item xs={12}>
        <Paper>xs=12</Paper>
      </Grid>
      <Grid item xs={12} sm={6}>
        <Paper>xs=12 sm=6</Paper>
      </Grid>
      <Grid item xs={12} sm={6}>
        <Paper>xs=12 sm=6</Paper>
      </Grid>
      <Grid item xs={6} sm={3}>
        <Paper>xs=6 sm=3</Paper>
      </Grid>
      <Grid item xs={6} sm={3}>
        <Paper>xs=6 sm=3</Paper>
      </Grid>
      <Grid item xs={6} sm={3}>
        <Paper>xs=6 sm=3</Paper>
      </Grid>
      <Grid item xs={6} sm={3}>
        <Paper>xs=6 sm=3</Paper>
      </Grid>
    </Grid>
  </Container>

这导致以下结果：

然后我修改了代码，试图实现我只有两篇论文的目标，如下：

  <Container>
    <Grid container spacing={24}>
      <Grid item xs={12} sm={6}>
        <Paper>xs=12 sm=6</Paper>
      </Grid>
      <Grid item xs={12} sm={6}>
        <Paper>xs=12 sm=6</Paper>
      </Grid>
    </Grid>
  </Container>

但是正如你所看到的，这导致了两篇没有整个屏幕的论文：

有人能指出一个工作示例代码段，它允许我有两个占据整个宽度的元素吗？

Answer 1

我怀疑Container组件会导致您出现问题。由于您尚未链接其实现，请参阅下面的示例，了解您想要的实例。

由于材料使用flexbox，因此他们使用了属性flexGrow

flex-grow CSS属性指定弹性项目的弹性增长因子。它指定项目应占用的Flex容器内的空间量。 flex项的flex增长因子是相对于flex-container中其他子项的大小。

这是控制网格中元素增长的属性。

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';

const styles = theme => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing.unit * 2,
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
});

function CenteredGrid(props) {
  const { classes } = props;

  return (
    <div className={classes.root}>
        <Grid container spacing={24}>
          <Grid item xs={12} sm={6}>
            <Paper>xs=12 sm=6</Paper>
          </Grid>
          <Grid item xs={12} sm={6}>
            <Paper>xs=12 sm=6</Paper>
          </Grid>
        </Grid>
    </div>
  );
}

CenteredGrid.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(CenteredGrid);

Answer 2

对于那些将Material UI与styled-components结合使用的人，这就是我能够使网格项目正确增长的方式：

import GridBase from "@material-ui/core/Grid";

const Grid = styled(GridBase)`
  .MuiGrid-root {
    flex-grow: 1;
  }
`

现在，您可以在组件中正常使用Grid。

Answer 3

最佳做法是测试所有断点并为每个屏幕宽度指定空间分配。

<Grid item xs={12} sm={12} md={12} lg={6} xl={4}>

</Grid>

xs，超小0px

sm，小：600像素

md，中：960px

lg，大：1280像素。

xl，超大：1920px

https://material-ui.com/customization/breakpoints/

xs 定义组件将要使用的网格数。它适用于所有优先级最低的屏幕尺寸。

sm 定义组件将要使用的网格数。如果没有覆盖，它将应用于sm断点和更宽的屏幕。

md 定义组件将要使用的网格数。如果不被覆盖，则适用于md断点和更大的屏幕。

（依此类推）更多详情，请访问：https://material-ui.com/api/grid/

Answer 4

我知道这是个老问题，但只是想分享。

您的代码存在的问题是spacing={24} 基于文档 Spacing 。默认情况下，两个网格项之间的间距遵循线性函数：output(spacing) = spacing * 8px

例如spacing={24} 创建一个 192 像素 的大间隙。所以最后，内容可用的空间非常小。

<Grid container spacing={2}> //  usually 2 or 3  is quite enough for me
  <Grid item xs={12} sm={6}>
    <Paper>xs=12 sm=6</Paper>
  </Grid>
  <Grid item xs={12} sm={6}>
    <Paper>xs=12 sm=6</Paper>
  </Grid>
</Grid>

全宽材料-UI网格无法正常工作

4 个答案: