AppBar перекрывается с другими элементами

Question

Я начинаю использовать React / Material-UI, а также новичок в CSS и т. Д. У меня есть простой макет страницы с APPBar. К сожалению, этот AppBar перекрывает элементы, которые должны идти под ним.

Я нашел этот ответ: Вопросы по интерфейсу AppBar Material

Но это кажется совершенно неправильным. Что если мой AppBar имеет переменную высоту, в зависимости от значков, режимов отображения и т. Д ...?

Я попытался создать вертикальную сетку, чтобы обернуть элементы в разные элементы, сделал верхний контейнер гибкимодин и играть с настройками flex, кажется, ничего не работает, панель приложения всегда находится сверху текста.

Код очень прост:

import React from 'react';
import { AppBar, Typography, Box } from '@material-ui/core';

function App() {
    return (
        <div>
            <AppBar>
                <Typography variant='h3'>
                    AppBar
                </Typography>
            </AppBar>
            <Box>
                <Typography variant='h1' style={{ border: '1px solid black' }}>
                    Hello
                </Typography>
            </Box>
        </div>
    )
}

export default App;

Блок текста «Hello»видна только половина:

Answer 1

MaterialUI предоставляет тематический миксин для панели приложений, который может помочь. Не уверен, что вы используете рекомендованную настройку JSS, но вы можете сделать что-то вроде этого:

import withStyles from '@material-ui/core/styles/withStyles';
const styles = theme => ({
  appBarSpacer: theme.mixins.toolbar
});

const style = withStyles(styles)

function MyScreen ({ classes }) {
  <AppBar></AppBar>
    <div className={classes.appBarSpacer}></div>
  <Box></Box>
}

export default style(MyScreen)

Миксин придаст этому div ту же высоту, что и ваша панель приложений, опуская вниз другой контент.

Answer 2

Я думаю, что хорошая настройка приложения является мнением, но я бы порекомендовал следующее

import React from "react";
import ReactDOM from "react-dom";
import {
  AppBar,
  Typography,
  Box,
  CssBaseline,
  makeStyles,
  Container,
  Grid,
  Toolbar
} from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  content: {
    flexGrow: 1,
    height: "100vh",
    overflow: "auto"
  },
  appBarSpacer: theme.mixins.toolbar,
  title: {
    flexGrow: 1
  },
  container: {
    paddingTop: theme.spacing(4),
    paddingBottom: theme.spacing(4)
  }
}));

function App() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar position="absolute">
        <Toolbar className={classes.toolbar}>
          <Typography
            component="h1"
            variant="h6"
            color="inherit"
            noWrap
            className={classes.title}
          >
            AppBar
          </Typography>
        </Toolbar>
      </AppBar>
      <main className={classes.content}>
        <div className={classes.appBarSpacer} />
        <Container maxWidth="lg" className={classes.container}>
          <Grid container spacing={3}>
            <Grid item xs={12}>
              <Box>
                <Typography variant="h1" style={{ border: "1px solid black" }}>
                  Hello
                </Typography>
              </Box>
            </Grid>
          </Grid>
        </Container>
      </main>
    </div>
  );
}

Answer 3

Это происходит потому, что по умолчанию для панели приложения MaterialUI установлено значение position="fixed". Это отделяет его от стандартного макета DOM, позволяя прокручивать содержимое под ним, но в результате на странице не остается места для него.

Вы можете обойти это, обернув все содержимое под ним в div и указав достаточное поле или изменив свойство position на <AppBar>, чтобы оно больше не "fixed". В вашем примере вы также можете просто применить стили к <Box>, если это единственный контент ниже <AppBar>.

например

import React from 'react';
import { AppBar, Typography, Box } from '@material-ui/core';

function App() {
    return (
        <div>
            <AppBar>
                <Typography variant='h3'>
                    AppBar
                </Typography>
            </AppBar>
            <div style={{marginTop: 80px}}>
                <Box>
                    <Typography variant='h1' style={{ border: '1px solid black' }}>
                        Hello
                    </Typography>
                </Box>
            </div>
        </div>
    )
}

export default App;