Conteneur de grille comme un conteneur Bootstrap

Question

Donc, je veux créer une mise en page qui ressemblera à ceci:  

Par exemple, dans Bootstrap, je peux écrire simplement:

<div class="container">
  <!-- Content here -->
</div>

Et tout sera cool.

Y at-il une bonne solution propre à faire quelque chose comme ça dans Material-UI? Par défaut, le système Grid crée un conteneur de fluide de pleine largeur.

Answer 1

Pour ce faire, utilisez les éléments Grille composant et Points de rupture réactifs . Jetez un coup d’œil à la page Layout, Grid dans les docs.

Voici un exemple:

const styles = theme => ({
  demo: {
    height: 240,
    background: "#f00",
    [theme.breakpoints.up("lg")]: {
      width: 1170
    }
  }
});

class ResponsiveGrid extends React.Component {
  render() {
    const { classes } = this.props;
    return (
      <Grid container justify="center">
        <Grid
          container
          className={classes.demo}
          alignItems="center"
          justify="center"
        >
          <Grid item>Content Here</Grid>
        </Grid>
      </Grid>
    );
  }
}

export default withStyles(styles)(ResponsiveGrid);

Nous définissons un ensemble de styles qui sont ajoutés au composant en tant que prop classes à l'aide de withStyles . La classe demo utilise la theme pour créer une requête multimédia pour le point d'arrêt lg du thème. Pour les fenêtres lg ou supérieure, la largeur sera définie sur 1170.

Une grande fenêtre est considérée comme comprise entre 1280 et 1919 px. Ces valeurs par défaut sont basées sur la norme Material Design.

En savoir plus sur Points de coupure réactifs et voir ceci codesandbox pour une version fonctionnelle de mon exemple.

Answer 2

J'ai résolu ce problème en créant un fichier CSS personnalisé et en le collant dans la classe d'amorçage .container à partir du fichier bootstrap-grid.css comme celui-ci.

custom-style.css

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

et importez simplement ce fichier custom-style.css dans votre fichier index.js de votre projet ReactJS.

import 'path/to/your/custom-style.css';

Dans Material-ui, les composants prédéfinis ont leur propre configuration de remplissage et lorsque vous les combinez avec notre classe personnalisée .container, vous pouvez obtenir un remplissage supplémentaire qui ne veut pas. Pour résoudre ce problème, nous pouvons écrire nos classes d'assistance dans le même fichier custom-style.css comme celui-ci.

// padding helper classes
.p-0 {
  padding: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.ptb-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

une fois ceci installé, nous pouvons utiliser nos classes personnalisées comme dans le balisage HTML, mais dans React, avec la propriété className

<Grid container>
  <AppBar position="static">
    <div className="container">
      <Toolbar className="p-0" >
        <Typography variant="h6" color="inherit" className={classes.grow}>
          Learning
        </Typography>
        <Hidden xsDown>
          <Button color="inherit">Login</Button>
          <Button color="inherit">Register</Button>
        </Hidden>
        <Hidden smUp>
          <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
            <MenuIcon />
          </IconButton>
        </Hidden>
      </Toolbar>
    </div>
  </AppBar>
</Grid>

et maintenant, il est correctement aligné, tout comme bootstrap .container class