web-dev-qa-db-fra.com

La grille pleine largeur du matériau et de l'interface utilisateur ne fonctionne pas comme elle le devrait

J'essaie de comprendre Material-UI @ next grid layout system.

Mon objectif est d'avoir deux papiers qui s'étendent sur toute la largeur de l'écran et se cassent chaque fois que l'écran devient plus petit en un seul papier. documentation a l'extrait de code suivant:

  <Container>
    <Grid container spacing={24}>
      <Grid item xs={12}>
        <Paper>xs=12</Paper>
      </Grid>
      <Grid item xs={12} sm={6}>
        <Paper>xs=12 sm=6</Paper>
      </Grid>
      <Grid item xs={12} sm={6}>
        <Paper>xs=12 sm=6</Paper>
      </Grid>
      <Grid item xs={6} sm={3}>
        <Paper>xs=6 sm=3</Paper>
      </Grid>
      <Grid item xs={6} sm={3}>
        <Paper>xs=6 sm=3</Paper>
      </Grid>
      <Grid item xs={6} sm={3}>
        <Paper>xs=6 sm=3</Paper>
      </Grid>
      <Grid item xs={6} sm={3}>
        <Paper>xs=6 sm=3</Paper>
      </Grid>
    </Grid>
  </Container>

Il en résulte ce qui suit: enter image description here

J'ai ensuite modifié le code pour essayer d'atteindre mon objectif de seulement deux articles, comme ceci:

  <Container>
    <Grid container spacing={24}>
      <Grid item xs={12} sm={6}>
        <Paper>xs=12 sm=6</Paper>
      </Grid>
      <Grid item xs={12} sm={6}>
        <Paper>xs=12 sm=6</Paper>
      </Grid>
    </Grid>
  </Container>

Mais comme vous pouvez le voir, cela se traduit par deux articles qui ne prennent pas tout l'écran: enter image description here

Quelqu'un peut-il m'indiquer un exemple de fragment de travail qui me permet d'avoir deux éléments qui prennent toute la largeur?

cssreactjsmaterial-designmaterial-ui
9
James

Je soupçonne que le composant Conteneur vous pose des problèmes. Puisque vous n'avez pas lié son implémentation, voir ci-dessous pour un exemple de travail de ce que vous voulez.

Puisque Material utilise flexbox ils utilisent la propriété flexGrow

La propriété CSS flex-grow spécifie le facteur d'agrandissement flex d'un élément flex. Il spécifie la quantité d'espace à l'intérieur du conteneur flexible que l'élément doit occuper. Le facteur de croissance flexible d'un élément flexible est relatif à la taille des autres enfants dans le conteneur flexible.

Il s'agit de la propriété qui régit la croissance des éléments dans la grille.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';

const styles = theme => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing.unit * 2,
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
});

function CenteredGrid(props) {
  const { classes } = props;

  return (
    <div className={classes.root}>
        <Grid container spacing={24}>
          <Grid item xs={12} sm={6}>
            <Paper>xs=12 sm=6</Paper>
          </Grid>
          <Grid item xs={12} sm={6}>
            <Paper>xs=12 sm=6</Paper>
          </Grid>
        </Grid>
    </div>
  );
}

CenteredGrid.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(CenteredGrid);
12
Paul McLoughlin