reactjs - 如何添加覆盖单个组件(例如 Paper 而不是整个屏幕)的背景幕

Question

标准的背景幕实现用加载指示器覆盖整个屏幕。

我在 Paper 组件中有一个表格，我正在执行服务器端分页/加载，我想在加载时在 Paper 或什至只显示 TableBody 上显示叠加层。

有谁知道这是如何实现的？

谢谢!

Answer 1

以下是 Backdrop 的 default styles :

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-index，因为它默认为 -1，这会将其置于当前 stacking context 中的其他事物之后(例如它所包含的 Paper)。

下面是一个工作示例:

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