[英]Target specific class using Styled Components React.js
我正在尝试将主题添加到导航栏组件。 这个组件有一个 function 用于在向下滚动时显示一个粘性导航栏。 一旦 window 向下滚动,我真的被困在“粘性” class 上。 这适用于普通的 css 但是一旦我将它添加到样式组件并从 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 瞄准“粘性”class。
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};
}
`;
看起来&.sticky
之间的一个不必要的空间最终会申请孩子而不是 header 本身。 正确的应该是:
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};
}
`;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.