在viewport中的节中更新Navbar css属性

Question

我正在使用反应相交观测器来查看某个部分是否在视图中。

此函数从外部“节”组件中调用。当它被召唤时..。我希望它在我的" navbar“组件中更改:active状态，因此，例如，如果我在AboutSection中滚动，那么导航条链接将改变颜色。

// when component within view, do this
export const inView = (section) => {
  console.log(`${section} section is in view`);
};

这是Navbar组件

import Box from "@mui/material/Box";
import Link from "@mui/material/Link";
import "../App.css";

const Navbar = () => {
  return (
    <Box
      component="div"
      id="navbar"
      sx={{
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        width: "300px",
        position: "fixed",
        top: "0",
        p: 1,
        boxShadow: 5,
        borderRadius: 2,
        backgroundColor: "primary.main",
        mt: 2,
        animationName: "intro",
        animationDuration: "6s",
        zIndex: "1000",
        "& .nav-link": {
          padding: 1,
          textDecoration: "none",
          color: "primary.light",
        },
        "& .nav-link:hover": {
          color: "secondary.main",
          transform: "scale(1.1)",
          transition: "ease-in 0.2s",
        },
      }}
    >
      <Link href="#home" className="nav-link">
        Home
      </Link>
      <Link href="#about" className="nav-link">
        About
      </Link>
      <Link href="#talents" className="nav-link">
        Talents
      </Link>
      <Link href="#contact" className="nav-link">
        Contact
      </Link>
    </Box>
  );
};
export default Navbar;

这是节组件中的一个片段。

const HeroSection = () => {
 // react-intersection-observer functionality
  const elementRef = useRef(null);
  const isOnScreen = useOnScreen(elementRef);
  if (isOnScreen) inView("Hero"); // calls the function described
}

我希望这是有意义的

谢谢大家

Answer 1

我认为，与其更改:active状态，不如进行基于类的设置(如果CSS在您的控制范围内)。例如，您可以说如果元素有.active (而不是:active)，那么应用一些样式。在元素中添加一个类将更容易，imo。