Twitter bootstrap React Material UI-引导容器等效物

主题是React Material UI中的一个组件，其行为类似于Bootstrap的

我希望它有断点（或者至少有一个合理的

max-width

）

---

我很确定这不重要，但我想将它与

应用程序栏

和

抽屉

一起使用，这是用于引导的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;
  }
}

---

参考

我个人有以下实现：

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

从'@materialui/core/styles'导入{withStyles}；
常量样式=主题=>({
容器：{
paddingRight:15，
paddingLeft:15，
marginRight:“自动”，
marginLeft:'自动'，
//（xs，超小型：0px或更大）和（sm，小型：600px或更大）的全宽
[theme.breakpoints.up（'md'）：{//medium:960px或更大
宽度：920，
},
[theme.breakpoints.up（'lg'）：{//large:1280px或更大
宽度：1170，
},
[theme.breakpoints.up（'xl'）：{//extra-large:1920px或更大
宽度：1366，
},
},
});
常量MyContainer=（）=>(
{/*这里还有其他东西*/}
);
导出默认样式（样式）（MyContainer）；

---

您可以根据自己的意愿更改每个断点的宽度。

这是我的想法之一，只是似乎有点奇怪，没有组件可以这样做…@AnDrOiD引导程序上的许多组件在material UI中缺失。然而，这并不奇怪，因为材质UI一开始就有非常不同的设计原则。若你们想从引导中得到一些在MaterialUI中不存在的组件，唯一的方法就是自己创建它们