Struggling with integrating a theme into a navbar component that includes a sticky effect on scroll. The issue arises when trying to target the 'sticky' class using styled-components instead of regular CSS. Any ideas on how to properly target the className 'sticky'? Thanks in advance!
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>
);
}
The 'sticky' class can be targeted with normal CSS.
header.sticky {
background-color: rgb(31, 31, 37);
}
Now attempting to target 'sticky' using Styled Components.
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};
}
`;