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

Question

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

我的目标是让两张纸在整个屏幕宽度上展开，并在屏幕变小到只有一张纸时中断。 documentation 的代码如下：sn-p：

  <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>

但正如您所见，这会导致两篇论文没有占据整个屏幕：

有人可以给我指出一个工作示例 sn-p，它允许我拥有两个占据整个宽度的元素吗？

Answer 1

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

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

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

<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>

Answer 2

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

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

</Grid>

xs，超小0px

sm，小：600px

md，中：960px

lg，大：1280px。

xl，超大：1920px

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

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

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

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

（等等） 更多：https://material-ui.com/api/grid/

Answer 3

对于那些使用 styled-components 的 Material UI 的用户，我可以通过以下方式使网格项目正确增长：

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

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

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

Answer 4

我怀疑 Container 组件给您带来了问题。由于您尚未链接其实现，请参阅下面的工作示例以了解您想要的内容。

由于 Material 使用 flexbox，它们使用属性 flexGrow

flex-grow CSS 属性指定弹性项目的弹性增长因子。它指定项目应占用的弹性容器内的空间量。弹性项目的弹性增长因子与弹性容器中其他子项的大小有关。

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

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);