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

Posted 2023-02-22

【中文标题】全宽 Material-UI 网格无法正常工作

【英文标题】：Full Width Material-UI Grid not working as it should

【发布时间】：2018-09-22 15:34:14

【问题描述】：

我正在尝试了解 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，它允许我拥有两个占据整个宽度的元素吗？

【参考方案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>

【参考方案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/

【参考方案3】：

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

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

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

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

【参考方案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);

【讨论】：

我不明白你的 flex-grow:1 的角色。它仅适用于弹性项目，这里这个 div 是一个***标签...没有它的工作示例...codesandbox.io/s/mm2vwpljr9

@Tomek 我没有看到您的示例中的间距。

谢谢哥们……但我不认为 id 需要 flexGrow