React Material UI - Bootstrap 容器等价物

Question

主题是 React Material UI 中的一个组件，其行为类似于 Bootstrap 的<div class="container">吗？

我希望它有断点（或者至少有一个合理的max-width ）。

我很确定这没关系，但我想将它与AppBar和Drawer一起使用。

Answer 1

这是引导容器的 css。 您可以自己创建一个并使用它。

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

引用自https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css

Answer 2

我个人有这个实现：

import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
    container: {
        paddingRight: 15,
        paddingLeft: 15,
        marginRight: 'auto',
        marginLeft: 'auto',

        // Full width for (xs, extra-small: 0px or larger) and (sm, small: 600px or larger)
        [theme.breakpoints.up('md')]: {  // medium: 960px or larger
            width: 920,
        },
        [theme.breakpoints.up('lg')]: {  // large: 1280px or larger
            width: 1170,
        },
        [theme.breakpoints.up('xl')]: {  // extra-large: 1920px or larger
            width: 1366,
        },
    },
});

const MyContainer = () => (
    <div className={styles.container}>
        {/* Other stuff here */}
    </div>
);

export default withStyles(styles)(MyContainer);

您可以根据需要更改每个断点的宽度。