Question

所以，我想创建一个如下所示的页面布局：

例如，在Bootstrap中我可以简单地写一下：

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

一切都会很酷。

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

Answer 1

这可以使用Grid组件和Responsive Breakpoints来完成。请查看文档中的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);

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

大视口被认为是介于1280和1919之间。这些是默认值，基于材料设计标准。

详细了解Responsive Breakpoints，请参阅此codesandbox了解我的示例的工作版本。

Answer 2

如果您正在寻找行为类似于引导程序.container的东西，那么我将使用Material UI <Container />标签。作为起始包装器/容器，我不会使用<Grid />标签。

<Container maxWidth="lg">
  <!-- Content here -->
</Container>

https://material-ui.com/components/container/

Answer 3

我通过创建一个自定义CSS文件并从static int[] array = {3, 2, 1, 4, 5, 6}; static int n = 5; static int temp; for (int i = 0; i<=5; i++) { int min = 0; for (int j = i+1; j<=n; j++) { //System.out.println(j); if (array[j]<array[min]) { min = j; } if (min != i) { array[min] = array[i]; array[i] = array[min]; } } }文件中将其粘贴到引导.container类中来解决了这个问题。

custom-style.css

bootstrap-grid.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; } }文件导入到ReactJS项目的custom-style.css文件中即可。

index.js

在material-ui中，预定义的组件具有自己的填充设置，当将它们与我们的自定义import 'path/to/your/custom-style.css';类结合使用时，它可能会提供其他不必要的填充，要解决此问题，我们可以在相同的.container文件。

custom-style.css

设置完成后，我们可以像在html标记中一样使用自定义类，但是在React中，它具有// 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; }属性

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

Answer 4

在OP对OP帖子的评论的基础上，您可以制作一个特定的组件，该组件旨在创建引导样式的容器：

import React from "react";
import { Grid } from "@material-ui/core";

const BootstrapContainerGrid = props => {
  return (
    <Grid container style={{ marginTop: "3em" }}>
      <Grid item lg={2} md={2} sm={1} xs={false} />
      <Grid item lg={8} md={8} sm={10} xs={12}>
        {props.children}
      </Grid>
      <Grid item lg={2} md={2} sm={1} xs={false} />
    </Grid>
  );
};
export default BootstrapContainerGrid;

然后将您的实际组件作为子级传递到此引导样式容器：

<BootstrapContainerGrid>
  <MyComponent>
    ...
  </MyComponent>
</BootstrapContainerGrid>

现在至少您具有可重用性，并且可以轻松地编辑“容器”的显示方式。

更新[5/26/19]：Material-ui v4在核心“ @ material-ui / core / Container”中具有一个Container组件，它的作用似乎像一个引导容器。 https://material-ui.com/api/container/

网格容器，如Bootstrap容器

4 个答案: