javascript - How to center a grid in MaterialUI

Question

Welcome To Ask or Share your Answers For Others

javascript - How to center a grid in MaterialUI

asked Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - How to center a grid in MaterialUI

I am trying to create 3 paper elements in the vertical and horizontal center of the screen. No matter what css rules I apply or props, when I inspect the HTML elements in the console, the height of HTML is always 76 pixels, and the elements wont go any lower than the height of that div. I'm really at a loss here.

import React from 'react';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';

const useStyles = makeStyles({
  grid: {
    height: "100%"
  },
      paper: {
      height: 140,
      width: 100,
    },
});

export default function SpacingGrid() {
  const classes = useStyles();

  return (
      <Grid
        className={classes.grid}
        container
        justify="center"
        alignItems="center"
        spacing={2}
      >
        {[0, 1, 2].map((value) => (
            <Grid key={value} item>
              <Paper className={classes.paper} />
            </Grid>
          ))}
      </Grid>
  );
}

import React from 'react';
import ReactDOM from 'react-dom';
import SpacingGrid from './SpacingGrid';

ReactDOM.render(
  <React.StrictMode>
    <SpacingGrid />
  </React.StrictMode>,
  document.getElementById('root')
);

question from:https://stackoverflow.com/questions/65863559/how-to-center-a-grid-in-materialui

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-06T19:25:57+0000

To center both horizontally and vertically to the viewport, one needs to make the <html>, <body>, and <div id="root"> fill the viewport. To do this, create a file style.css:

html,
body,
#root {
  height: 100vh;
}

and then import the styles anywhere in your React project. For example, import it in index.js:

import React from "react";
import ReactDOM from "react-dom";
import SpacingGrid from './SpacingGrid';
import "./style.css";  // Add this!

ReactDOM.render(
  <React.StrictMode>
    <SpacingGrid />
  </React.StrictMode>,
  document.getElementById("root")
);

Here is a live version on stackblitz

Categories

javascript - How to center a grid in MaterialUI

javascript - How to center a grid in MaterialUI

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags