javascript - 导航栏在移动设备上显示为透明（Next js）

Question

在滚动一定数量的像素后，我已将导航栏设置为在大屏幕设备上从黑色变为透明，但在移动设备上将其设置为始终为黑色。但是，当我部署网站并在我的手机上访问它时，导航栏是透明的（无需滚动），直到我转到另一个页面。

有谁知道我可以如何修复这个错误？

import React, { useState, useRef, useEffect } from "react";
import window from "global";
import Link from "./Link";

export default function NavComponent(props) {

  const [navBackground, setNavBackground] = useState(false);
  const navRef = useRef();
  navRef.current = navBackground;
  useEffect(() => {
    const handleScroll = () => {
      const show = window.scrollY > 100;
      if (navRef.current !== show) {
        setNavBackground(show);
      }
    };
    document.addEventListener("scroll", handleScroll);
    return () => {
      document.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <div>
      <Navbar
        dark
        expand="xl"
        fixed="top"
        className={styles.nav}
        style={{
          backgroundColor: `${
            navBackground || window.innerWidth < 1200 ? "black" : "transparent"
          }`,
          transition: ".2s ease",
        }}
      >

编辑：我已经通过为断点放置媒体查询（最大宽度）来解决问题，并将颜色设置为black !important似乎覆盖了 JS 逻辑。

标签： javascriptreactjsdebuggingnext.js