web-dev-qa-db-ja.com

全幅Material-UIグリッドが正常に機能しない

Material-UI @ nextグリッドレイアウトシステムを理解しようとしています。

私の目標は、2つの用紙を画面全体に拡大し、画面が1枚の用紙に縮小するたびに破損するようにすることです。 documentation には次のコードスニペットがあります。

  <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>

この結果、次のようになります。 enter image description here

次に、次のように、2つの論文の目標を達成するためにコードを変更しました。

  <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>

しかし、ご覧のとおり、これは、画面全体を使用していない2つの論文になります。 enter image description here

誰かが私に完全な幅を取る2つの要素を持つことを可能にする実用的なスニペットを教えてもらえますか？

cssreactjsmaterial-designmaterial-ui
9
James

Containerコンポーネントが問題を引き起こしていると思われます。実装をリンクしていないため、必要な機能の例については以下を参照してください。

Materialは flexbox を使用するため、プロパティ flexGrow を使用します

Flex-grow CSSプロパティは、フレックスアイテムのフレックスグローファクターを指定します。アイテムがフレックスコンテナ内のどの程度のスペースを取るかを指定します。フレックスアイテムのフレックスグローファクタは、フレックスコンテナ内の他の子のサイズに関連しています。

これは、グリッド内の要素の成長を制御するプロパティです。

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