我有一个粘性的CTA组件。我需要在它的主页底部填充,这样当用户到达页面的末尾时,它就不会覆盖页脚。
我如何在cta组件本身中做到这一点?或者不要到处都是代码(在页面上添加CSS逻辑,与组件分开),使其难以维护?
export function Page() {
return (
<div className={`stickyCta ? "mb-50": ""`}> //want a different solution for THIS!!
<h1>Hello React.</h1>
<h2>Start editing to see some magic happen!</h2>
<StickyCta /> //cta has to go before the footer, as it should be here on the desktop. Sticky for mobile only
<Footer />
</div>
);
}
export function StickyCta() {
return (
<div className="fixed bottom-0 left-0 right-0">
<h1>get mine now</>
</div>
);
}
1条答案
按热度按时间agyaoht71#
“我怎么能在cta组件本身中做到这一点呢?”
即使你这样做也不会影响
Footer
组件,因为你的StickyCta
是固定的,并且在另一层。它们都在不同的层。改变StickyCta
中的任何属性都不会影响你的Footer
如何解决?
一种选择是在
Footer
中使用填充,而不是考虑StickyCta
所需的空间