网格容器,如Bootstrap容器

Question

所以,我想创建一个页面布局,如下所示:

例如,在Bootstrap中我可以简单地写:

<div class="container">
  <!-- Content here -->
</div>

一切都会很酷.

在Material-UI中有没有一个很好的清洁解决方案来做这样的事情？默认情况下,Grid系统创建全宽度的流体容器.

Answer 1

这可以使用Grid组件和Responsive Breakpoints来完成.看一下docs 中的Layout,Grid页面.

这是一个例子:

const styles = theme => ({
  demo: {
    height: 240,
    background: "#f00",
    [theme.breakpoints.up("lg")]: {
      width: 1170
    }
  }
});

class ResponsiveGrid extends React.Component {
  render() {
    const { classes } = this.props;
    return (
      <Grid container justify="center">
        <Grid
          container
          className={classes.demo}
          alignItems="center"
          justify="center"
        >
          <Grid item>Content Here</Grid>
        </Grid>
      </Grid>
    );
  }
}

export default withStyles(styles)(ResponsiveGrid);

我们定义了一组样式,这些样式作为classes使用withStyles的prop 添加到组件中.本demo类使用theme创建为主题的媒体查询lg断点.对于视口lg或更大的视口,宽度将设置为1170.

大视口被认为是在1280和1919之间.这些是默认值,基于Material Design标准.

阅读有关响应断点的更多信息,并查看此代码框以获取我的示例的工作版本.

Answer 2

我通过创建一个自定义 CSS 文件并.container从bootstrap-grid.css这样的文件中粘贴引导类来解决这个问题。

自定义样式.css

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

并简单地将此custom-style.css文件导入到您index.js的 ReactJS 项目文件中。

import 'path/to/your/custom-style.css';

在 material-ui 中，预定义组件有自己的填充设置，当将它们与我们的自定义.container类结合时，它可能会提供额外的不需要的填充，为了克服这个问题，我们可以custom-style.css像这样在同一个文件中编写我们的帮助类。

// padding helper classes
.p-0 {
  padding: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.ptb-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

设置完成后，我们可以使用自定义类，就像在 html 标记中使用它一样，但在 React 中，使用className属性

<Grid container>
  <AppBar position="static">
    <div className="container">
      <Toolbar className="p-0" >
        <Typography variant="h6" color="inherit" className={classes.grow}>
          Learning
        </Typography>
        <Hidden xsDown>
          <Button color="inherit">Login</Button>
          <Button color="inherit">Register</Button>
        </Hidden>
        <Hidden smUp>
          <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
            <MenuIcon />
          </IconButton>
        </Hidden>
      </Toolbar>
    </div>
  </AppBar>
</Grid>

现在它像引导.container类一样正确对齐