Wie arbeitet man richtig mit Responsivität in Reacts Material-UI?

Question

Ich bin neu mit dem Framework, und ich habe react-Bootstrap seitdem verwendet.

Für was ich verstehe, bietet Material-UI kein GRID-System, also habe ich für meine Anwendung react-flexbox-grid bereitgestellt. Aber die Komponente der Material-UI scheint die Rastergröße nicht zu respektieren. Hier ist, wie ich verwende es:

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 

Und meine zweite Frage ist: Wie kann ich eine navbar machen, die auf mobilen Verwendung von Material-UI kollabiert? Ich kann anscheinend keine Anweisungen dafür finden und alle Material-UI-Komponenten sehen wie nicht reagierend aus

Answer 1

Material UI haben ihr eigenes Flexbox-Layout implementiert.

Es ist derzeit nur in den next branch Es gibt einige Beispiele mit Code here

Sie es als nächstes durch die Angabe bei der Installation von Material-ui

npm install material-ui@next 

Was Ihre zweite Frage Materialdesign legt fest installieren dass deine Navigation von einem Sideav kommt. Aus diesem Grund ist es nicht in Material Design Frameworks implementiert. Weitere Informationen finden Sie unter here