I have a unique component for the hero section of every page with varying content and heights.
export default function CustomHero({
height,
children,
}: {
height: string;
children: ReactNode;
}) {
return (
<div
className={`flex flex-col h-[${height}] py-1 bg-red-400 text-white items-center justify-center`}
>
{children}
</div>
);
}
When using this component, the specified height does not apply to the page but is reflected correctly in the developer tools.
export default function Page() {
return (
<CustomHero height="500px">
<Search />
</CustomHero>
);
}
https://i.sstatic.net/V05YGpYt.png
I attempted setting a static height to troubleshoot potential issues with the hero component itself, and it worked as expected:
export default function Hero({
height,
children,
}: {
height: string;
children: ReactNode;
}) {
return (
<div
className={`flex flex-col h-[80px] py-1 bg-red-400 text-white items-center justify-center`}
>
{children}
</div>
);
}
However, when attempting to make the height dynamic, no changes are reflected.