我如何才能使卷轴nap型与React正确使用？

Question

我有一个反应应用程序，如下所示：

function App() {
  return (
    <div className="app">
      <Topbar/>
      <div className="sections">
        <Intro/>
        <Portfolio/>
        <Works/>
        <Contact/>
      </div>
    </div>
  );
}

4 个部分的组件有一个 css 文件，如下所示：

.intro{
    background-color: rgb(243, 208, 208);
    width: 100vw;
    height: calc(100vh - 70px);
    scroll-snap-align: start;
}

app.js css 文件如下所示：

.app{
    height: 100vh;

    .sections{
        width: 100%;
        height: calc(100vh-70px);
        background-color: rgb(105, 179, 130);
        position: relative;
        top: 70px;
        scroll-snap-type: y mandatory;
    }
}

本质上每个组件都是一个全尺寸的页面，其想法是进行快速滚动。有谁知道为什么我似乎无法让它工作？谢谢！