元素的样式在通过组件传递时不适用 - next.js

Question

我每个页面都有一个英雄部分的组件，但它的内容不同，所以它的高度也不同。

export default function Hero({
  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>
  );
}

但是当我使用它时，高度不适用于页面，但适用于开发工具

export default function Page() {
  return (
    <Hero height="500px">
      <Search />
    </Hero>
  );
}

我尝试将高度设为静态，以查看英雄组件本身是否有问题，但效果很好：

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>
  );
}

但是一旦它是动态的，什么也不会发生

Answer 1

我应该像这样替换整个类名而不是其中的一部分：height =“h-[500px]”