如何添加覆盖单个组件（例如 Paper 而不是整个屏幕）的背景幕

Question

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

我在 Paper 组件中有一个表格，我正在执行服务器端分页/加载，我想在加载时在 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-index，因为它默认为 -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>
  );
}