Javascript 如何使用React创建覆盖？

我正在尝试创建一个覆盖，当我单击菜单按钮时会显示，当单击页面上的任何位置时会关闭。但当我点击按钮时，什么都没有发生

我还是个新手，所以如果我犯了明显的错误，我希望你能理解

这是我的密码：

App.js

从“React”导入React；
从“react dom”导入react dom；
导入“/styles.css”；
const modalRoot=document.getElementById（“模态根”）；
常量模态=道具=>{
返回ReactDOM.createPortal(
{props.children}，
莫代尔根
);
};
导出默认函数App（）{
const[open，setOpen]=React.useState（false）；
返回(
设置打开（！打开）}>菜单
{打开并单击任意位置关闭}
);
}

App.css

正文{
字体系列：无衬线；
}
.App{
位置：相对位置；
文本对齐：居中；
}
* {
框大小：边框框；
}
.覆盖{
位置：固定；
显示：无；
宽度：100%；
身高：100%；
排名：0；
左：0；
右：0；
底部：0；
背景色：rgba（0,0,0,0.5）；
光标：指针；
}

---

这里有一个链接，指向

样式中的。css

，您正在将css

显示属性设置为
none
。这应更改为
显示：块

只有当
open
的值为
true
时，模式才会显示。您可能已经找到了答案，但您需要更改显示：无以显示：块，然后使用可见性：隐藏（当模式关闭时）和可见性：当模式打开时可见
确定，更改为
display:block
将使覆盖工作。但这又带来了另一个问题。覆盖已经打开，它应该从一开始就隐藏起来，直到我点击按钮。