javascript - React - 将变量传递给 css 表

Question

我想了解如何将值从 React 组件传递到 css 样式表。

基本上我有一个

.container {
   height:100vh;
    width:100vh;
   background-image:url(...)
   }

.container h1{
display:flex;
justify-content:center
transform:translateY(calc(-47%+0px)
letter-spacing:0px
}

当用户向下（或向上）滚动时，我会将 0px 更改为在我的 React 组件（currentScrollY）上获得的值，旁边是增加（或减少 - boolean goingUp）字母间距和 Y 轴上的平移。

const prevScrollY = useRef(0);
const [goingUp, setGoingUp] = useState(false);

const onScroll = (e) => {
const currentScrollY = e.target.scrollTop;
if (prevScrollY.current < currentScrollY && goingUp) {
  setGoingUp(false);
}
if (prevScrollY.current > currentScrollY && !goingUp) {
  setGoingUp(true);
}
prevScrollY.current = currentScrollY;
console.log(goingUp, currentScrollY);
};

谢谢

标签： javascripthtmlcssreactjsscroll