Стиль элемента не применяется при передаче через компоненты – next.js ⇐ CSS

[Anonymous]

У меня есть компонент для главной части каждой страницы, но его содержимое и высота отличаются.

Код: Выделить всё

export default function Hero({
height,
children,
}: {
height: string;
children: ReactNode;
}) {
return (
className={`flex flex-col h-[${height}] py-1 bg-red-400 text-white items-center justify-center`}
>
{children}

);
}

но когда я его использую, высота не применяется на странице, но применяется в инструменте разработчика

Код: Выделить всё

export default function Page() {
return (



);
}

Я пытался сделать высоту статичной, чтобы проверить, не случилось ли что-то не так с самим компонентом героя, но все сработало нормально:

Код: Выделить всё

export default function Hero({
height,
children,
}: {
height: string;
children: ReactNode;
}) {
return (
className={`flex flex-col h-[80px] py-1 bg-red-400 text-white items-center justify-center`}
>
{children}

);
}

но если он динамический, ничего не происходит

Подробнее здесь: https://stackoverflow.com/questions/786 ... ts-next-js