Как добавить фон, который перекрывает один компонент, например, бумагу, а не весь экран

Question

Стандартная реализация Backdrop перекрывает весь экран индикатором загрузки.

У меня есть таблица в компоненте Paper, в которой выполняется разбиение на страницы / загрузка на стороне сервера, и я хочу отобразить наложение чуть более бумага или даже просто TableBody при загрузке.

Кто-нибудь знает, как этого можно достичь?

Спасибо!

Answer 1

Ниже приведены стили по умолчанию для Backdrop:

export const styles = {
  /* Styles applied to the root element. */
  root: {
    // Improve scrollable dialog support.
    zIndex: -1,
    position: 'fixed',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    right: 0,
    bottom: 0,
    top: 0,
    left: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    WebkitTapHighlightColor: 'transparent',
  },
  /* Styles applied to the root element if `invisible={true}`. */
  invisible: {
    backgroundColor: 'transparent',
  },
};

Вы можете видеть, что подход, используемый для покрытия всего экрана, заключается в использовании right, bottom, top и left от нуля вместе с position из fixed. Изменив position на absolute, он будет охватывать своего ближайшего предка. Это означает, что вы захотите изменить содержащую Paper на позицию relative (если она уже не имеет позиции absolute). Вам также необходимо настроить z-индекс фона, поскольку по умолчанию он равен -1, что ставит его позади других вещей в текущем контексте стека (например, в бумаге, в которой он содержится).

Ниже приведен рабочий пример:

import React from "react";
import CssBaseline from "@material-ui/core/CssBaseline";
import Paper from "@material-ui/core/Paper";
import { withStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Backdrop from "@material-ui/core/Backdrop";
import Button from "@material-ui/core/Button";

const StyledPaper = withStyles({
  root: {
    height: 200,
    position: "relative"
  }
})(Paper);
const LimitedBackdrop = withStyles({
  root: {
    position: "absolute",
    zIndex: 1
  }
})(Backdrop);
export default function App() {
  const [showBackdrop, setShowBackdrop] = React.useState(false);
  return (
    <div>
      <CssBaseline />
      <Grid container spacing={2}>
        <Grid item xs={6}>
          <StyledPaper>
            <LimitedBackdrop open={showBackdrop}>
              <Button onClick={e => setShowBackdrop(!showBackdrop)}>
                Hide Backdrop
              </Button>
            </LimitedBackdrop>
            <div>
              Paper 1<br />
              {!showBackdrop && (
                <Button onClick={e => setShowBackdrop(!showBackdrop)}>
                  Show Backdrop
                </Button>
              )}
            </div>
          </StyledPaper>
        </Grid>
        <Grid item xs={6}>
          <StyledPaper>Paper 2</StyledPaper>
        </Grid>
      </Grid>
    </div>
  );
}