材料UI > 背景 > 仅用于页面的某些子组件

Question

有没有办法将https://material-ui.com/components/backdrop/中的背景增强以仅在单个组件上方显示加载圆圈（如果某个页面具有多个组件），而不是在整个页面上面显示？

谢谢回复。

- Seny

---

<Skeleton>怎么样？https://material-ui.com/components/skeleton/ - Arthur Rubens

Answer 1

Backdrop默认情况下是fixed定位的，这就是为什么它覆盖整个页面。

要实现您想要的效果，我们必须将其position更改为absolute并将其包含在具有relative位置的元素中 - 此元素可以是您的组件。如果您是CSS位置方面的新手，请查看来自developer.mozilla.org的文档。

了解所有这些，我们可以得出以下代码：

const useStyles = makeStyles({
  parent: {
    position: "relative",
    width: 200,
    height: 200,
    backgroundColor: "red",
    zIndex: 0,
  },
  backdrop: {
    position: "absolute"
  }
});

export default function App() {
  const classes = useStyles();

  return (
    <div className={classes.parent}>
      <Backdrop className={classes.backdrop} open={true}>
        <CircularProgress color="inherit" />
      </Backdrop>
    </div>
  );
}

同时，我们必须在父元素或背景元素上定义z-index，才能使其正常工作。不过我也不确定为什么。

我为您创建了一个Codesandbox，让您可以随意尝试。

- bertdida

Answer 2

我创建了一个自定义组件，如果我想要阻止UI的一部分，我会使用它：

"use strict";

/** external libraries */
import React from "react";
import Backdrop from "@mui/material/Backdrop";
import CircularProgress from "@mui/material/CircularProgress";

const BlockUi = ({open, onClose, children}) => {
    return (
        <div style={{"position": "relative"}}>
            <Backdrop
                sx={{color: "#FFFFFF", zIndex: (theme) => theme.zIndex.drawer + 1, "position": "absolute"}}
                open={open}
                onClick={() => onClose()}
            >
                <CircularProgress color="inherit"/>
            </Backdrop>
            {children}
        </div>
    );
}

export default BlockUi;

我这样使用它：

"use strict";

/** external libraries */
import React from "react";
import BlockUi from "./BlockUi";

const JsonForm = ({fields, onSubmit}) => {
    const [loading, setLoading] = React.useState(false)

    const stopLoading = () => {
        setLoading(false)
    }

    return (
        <div>
            <BlockUi open={loading} onClose={stopLoading}>
                <button type="submit" onClick={() => {
                    console.log(loading)
                    setLoading(true)
                }}>Submit
                </button>
            </BlockUi>
        </div>
    );
}

export default JsonForm;

- DrJele

Answer 3

Material UI 的 Backdrop 组件默认设置为 position: 'fixed'，因此它覆盖整个页面。

如果您希望它像 DOM 上的其他组件一样驻留和定位，您只需要将其位置重置为 relative，例如：

<Backdrop open={true} sx={{ position: 'relative' }}>
   <CircularProgress color="inherit" />
</Backdrop>

你不需要更改父组件，因为如果你没有更改它，它应该默认为相对定位。但是，如果你的应用程序中有疯狂的位置变化，那么你可能也要考虑更改它。

- Normal