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

我是新的框架，從那時起我一直在使用react-bootstrap。如何在React的Material-UI中正確使用Responsiviness？

據我所知，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的組件看起來都不響應

來源

2017-07-24 Alex Alonso

材質UI已經實現了自己的Flexbox佈局。

這是目前僅在next branch 有一些例子，代碼here

您可以通過指定未來安裝材料的UI

npm install [email protected]

時，關於你的第二個問題，材料設計採用的是安裝你的導航應該來自sidenav。這就是爲什麼它沒有在Material Design框架中實現的原因。有關更多信息，請參見here

來源

2017-07-28 17:02:01 kemotoe

如果您使用的是打字稿，他們當前沒有爲網格發佈打字稿。 – mjwrazor

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

回答

相關問題