如何在React的Material-UI中正确使用Responsiviness？

Question

我是新的框架，从那时起我一直在使用react-bootstrap。

据我所知，Material-UI不提供GRID系统，所以我为我的应用程序提供了react-flexbox-grid。但是Material-UI的组件似乎并不关注网格大小。下面是我如何使用它：

import React from 'react' 
import MenuContainer from '../containers/MenuContainer.jsx' 
import AppBar from 'material-ui/AppBar' 
import { Grid, Row, Col } from 'react-flexbox-grid' 

const IndexComponent = ({children}) => (
    <Grid fluid> 
    <Row> 
     <Col xs={12} md={12} center="xs"> 
     <AppBar 
      title="Comics Index" 
      showMenuIconButton={false} 
     /> 
     </Col> 
    </Row> 
    <Row> 
     <Col xs={12} md={3}> 
     <MenuContainer width="100%" /> 
     {children} 
     </Col> 
    </Row> 
    </Grid> 
) 

export default IndexComponent 

我的第二个问题是：如何使能在移动使用材料的UI崩溃一个导航栏？我似乎无法找到任何方向，所有Material-UI的组件看起来都不响应

Answer 1

材质UI已经实现了自己的Flexbox布局。

这是目前仅在next branch 有一些例子，代码here

您可以通过指定未来安装材料的UI

npm install material-ui@next 

时，关于你的第二个问题，材料设计采用的是安装你的导航应该来自sidenav。这就是为什么它没有在Material Design框架中实现的原因。有关更多信息，请参见here