Как центрировать сетку в пользовательском интерфейсе материала

Question

Я пытаюсь создать 3 бумажных элемента в центре экрана по вертикали и горизонтали. Независимо от того, какие правила CSS я применяю или какие реквизиты, когда я проверяю элементы HTML в консоли, высота HTML всегда составляет 76 пикселей, и элементы не будут опускаться ниже высоты этого div. Я действительно в растерянности.

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')
);

javascript reactjs material-ui

2

Sheen 23 Янв 2021 в 22:34

Answer 1

Чтобы центрировать как по горизонтали, так и по вертикали относительно области просмотра, необходимо, чтобы <html>, <body> и <div id="root"> заполняли область просмотра. Для этого создайте файл style.css:

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

А затем импортируйте стили в любом месте вашего проекта React. Например, импортируйте его в 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")
);

Это живая версия на stackblitz

0

Charles Kornoelje 23 Янв 2021 в 19:57

Answer 2

const useStyles = makeStyles({
  grid: {
    position: "absolute", // add this.
    height: "100%"
  },
      paper: {
      height: 140,
      width: 100,
    },
});

Вот ссылка песочница .

0

vipcxj 23 Янв 2021 в 19:49

Как центрировать сетку в пользовательском интерфейсе материала

2 ответа

Похожие вопросы

Новые вопросы

javascript