next.js 顺风的宽度和高度类在作为 prop 发送时不起作用[副本]

2admgd59 于 2023-11-18 发布在其他

关注(0)|答案(1)|浏览(101)

此问题在此处已有答案：

Why can't I pass variable as a className to tailwind-css?（1个答案）
5天前关闭。
我想做一个可调整大小的盒子组件。

export default function Box({ className="", width, height}: {className?: String, width: string, height: string}) {
   return (
      <div className={`w-${width} h-${height} ${className}`}></div>
   )
}

字符串
我用它在主页.tsx像这样

<Box 
    width="32" 
    height="32"/>

型
我甚至试图通过使用h-[${height}]和w-[${width}]提供任意值来使宽度和高度更明确，但它就是不起作用。
但是，当我尝试在box组件的className中做同样的事情时，它确实工作了，奇怪的是，如果我，例如，写
<Box className="w-10 h-10">个
然后，如果我再次尝试我原来的方法，通过使用props，它工作了（即使在删除className之后）。有点像，它以某种方式被缓存了。其他值仍然不工作。任何修复？

next.js

来源：https://stackoverflow.com/questions/77468802/width-and-height-classes-of-tailwind-not-working-when-sending-them-as-props

1条答案

按热度按时间

ippsafx71#

根据文件：
Tailwind如何提取类名的最重要的含义是，它只会在源文件中找到作为 * 完整完整的字符串 * 存在的类。
如果你使用字符串插值或将部分类名连接在一起，Tailwind将找不到它们，因此不会生成相应的CSS：

不要动态构造类名

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

字符串
在上面的示例中，字符串text-red-600和text-green-600不存在，因此Tailwind不会生成这些类。相反，请确保您使用的任何类名完整存在：

始终使用完整的类名

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

型
您可以考虑：

在定义中使用完整的类名，如您所说的：

<Box className="w-[32px] h-[32px]">

或

<Box width="w-[32px]" height="h-[32px]">

export default function Box({ className="", width, height}: {className?: String, width: string, height: string}) {
   return (
      <div className={`${width} ${height} ${className}`}></div>
   )
}

使用style属性，如：

<Box width="32" height="32"/>

export default function Box({ className="", width, height}: {className?: String, width: string, height: string}) {
   return (
      <div className={className} style={{ height, width }}></div>
   )
}

赞(0）回复(0）举报 2023-11-18

我来回答

next.js 顺风的宽度和高度类在作为 prop 发送时不起作用[副本]

1条答案

相关问题

热门标签

最新问答