代码之家 › 专栏 › 技术社区 › James

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

material-ui material-design reactjs css

James · 技术社区 · 6 年前

我正在努力理解材料-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>

但正如你所看到的,这导致了两篇论文,它们并没有占据整个屏幕:

有人能给我指出一个工作示例片段,它允许我有两个全宽的元素吗?

4 回复 | 直到 6 年前

Paul McLoughlin 6 年前

我怀疑容器组件导致了您的问题。由于您尚未链接其实现,请参见下面的一个您想要的工作示例。

由于材料使用 flexbox 他们利用财产 flexGrow

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

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

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

Michael Nelles Kranti Brid 4 年前

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

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

</Grid>

xs,超小型0px

sm,小型:600px

md,中等:960像素

lg,大:1280px。

xl,超大:1920像素

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

xs型 定义零部件要使用的轴网数量。它适用于所有具有最低优先级的屏幕大小。

SM 定义零部件要使用的轴网数量。如果不重写,它将应用于sm断点和更宽的屏幕。

md公司 定义零部件要使用的轴网数量。如果不重写,它将应用于md断点和更宽的屏幕。

(等等) 更多信息: https://material-ui.com/api/grid/

Dylan Pierce 5 年前

对于使用材质UI的用户 styled-components ,以下是我如何使网格项正确增长的:

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

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

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

pmatatias 3 年前

我知道这是个老问题,但我想和大家分享一下。

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

e、 g。 间距={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>