IT技术 - 使用样式化组件 React.js 定位特定类 - 吾爱随笔录

我正在尝试将主题添加到导航栏组件。该组件具有向下滚动时显示粘性导航栏的功能。向下滚动窗口后，我真的被困在“粘性”类上。这适用于普通的 css，但是一旦我将它添加到 styled-component 并将其从 css 中删除，它就不起作用了。

也许我没有正确定位className'sticky'？

有什么建议么？？谢谢！

    export function Nav() {
      const [theme, setTheme] = useState("light");
      const [theTheme, setTheTheme] = useGlobal("onTheme");

      useEffect(() => {
        if (theTheme == false) setTheme("dark");
        else setTheme("light");

   
        window.addEventListener("scroll", function () {
        var header = document.querySelector("header");
        header.classList.toggle("sticky", window.scrollY > 0);
    });
  });

  return (
    <ThemeProvider theme={getTheme(theme)}>
      <Head>
        <Navbar>
          <NavLink></NavLink>
          <NavItem icon={<CaretIcon />}>
            <DropdownMenu />
          </NavItem>
        </Navbar>
      </Head>
    </ThemeProvider>
  );
}

我可以使用普通 CSS 定位“粘性”类。

    header.sticky {
      background-color: rgb(31, 31, 37);
    }

我正在尝试使用样式化组件来定位“粘性”。

    export const Head = styled.header`
      position: fixed;
      width: 100%;
      background-color: transparent;
      top: 0rem;
      transition: 0.6s;
      z-index: 100000;
      text-decoration: none;
      & .sticky {
        background-color: ${(props) => props.theme.hoverColor};
       } 
     `;