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

我的第二个问题是：如何使用Material-UI制作在移动设备上折叠的导航栏？我似乎无法找到任何指示，所有Material-UI的组件看起来都没有响应

Answer 1

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

目前只在next branch 代码here

有一些例子

您可以通过在安装material-ui

时指定next来安装它

npm install material-ui@next

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

如何在React的Material-UI中正确地处理响应？

1 个答案: