如果 open prop 值为 true 我想对 body 元素应用位置修复,我如何使用样式化组件来实现?
export const Navbar = styled.nav`
box-sizing: border-box;
overflow-y: scroll;
justify-content: center;
background: ${() => "#ffffff"};
height: 100vh;
text-align: left;
padding: 5rem 4rem 2rem;
top: 0;
left: 0;
transition: transform 0.3s ease-in-out;
transform: ${({ open }) => (open ? "translateX(0)" : "translateX(-110%)")};
body {
position: ${({ open }) => (open ? "fixed" : "absolute")};
}
最佳答案
我不熟悉 react 样式的组件,但我怀疑嵌套 body
的语法标签是正确的。
您可以使用 useEffect
卡在您的导航栏组件中:
useEffect(() => {
document.body.style.position = open ? 'fixed' : 'absolute';
}, [open]);
这将首先调用箭头函数,每当 open
Prop 变化。
关于javascript - 如果存在 prop,如何将 CSS 应用于 body 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65204853/