我有一个粘性的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>
  );
}