如何在React的Material-UI中正确处理责任？

Question

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

据我所知，Material-UI没有提供网格系统，所以我为我的应用程序提供了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

我的第二个问题是:如何使用Material-UI制作在移动设备上折叠的导航栏？我似乎找不到任何方向，所有的材料-UI的组件看起来没有响应

Answer 1

Material UI实现了自己的Flexbox布局。

它目前只在next branch中有一些示例，代码是here

您可以在安装material-ui时指定next来安装它

npm install material-ui@next

至于你的第二个问题，材料设计指定你的导航应该来自sidenav。这就是为什么它没有在Material Design框架中实现的原因。有关详细信息，请参阅here