Css ReactJS内联样式绝对顶部："；“100vh”；工作不正常

我的App.js中有一个名为Overlay的基本组件。它只是一个div，我尝试使用绝对定位来定位它，但是当我尝试从内联样式设置顶部样式时，组件不会离开视图；然而，当我使用一个单独的样式表进行设置时，它工作得很好。我已经包含了内联与样式表的并排图片，我想知道如何使内联与样式表相同。提前谢谢

无顶部：

内联顶部：

样式表顶部：

代码：

Overlay.js

import React from "react";
import "./Overlay.css";

class Overlay extends React.Component {
  render() {
    return (
      <div
        className="Overlay" style={{ top: "calc(100vh - 60px)" }}
      ></div>
    );
  }
}

export default Overlay;

---

编辑：问题似乎是react的热重新加载有时无法正确更新内联样式，需要手动重新加载才能应用。这似乎是React结尾的一个问题。

代码运行良好，只是为了向您展示，在代码中，我添加了背景色

<div className="Overlay" style={{ top: "calc(100vh - 200px)" , backgroundColor: "yellow"}}></div

---

我刚刚测试了你的代码，两种方式的效果都一样。看看：这段代码应该可以正常工作，这很奇怪。。。当我把它放在我的一边时，它有时会正常工作，其他时候它会像图中所示那样加载。热刷新的方式是否会导致这种情况？
<div className="Overlay" style={{ top: "calc(100vh - 200px)" , backgroundColor: "yellow"}}></div