next.js 未应用svg/path的填充[重复]

disho6za 于 2023-08-04 发布在其他

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

此问题在此处已有答案：

How to use template literals in tailwindcss to change classes dynamically?（2个答案）
Why can't I pass variable as a className to tailwind-css?（1个答案）
5天前关闭。
我有svg，我通过 prop 应用2种颜色，一种用于背景工程，另一种用于填充。我用的是Next.js

export default function Divider({
  topColor,
  bottomColor,
}: {
  topColor: string;
  bottomColor: string;
}) {
  return (
    <svg
      data-name="Layer 1"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 1200 120"
      preserveAspectRatio="none"
      className={`bg-${bottomColor}`}
    >
      <path
        d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
        className={`fill-${topColor}`}
      ></path>
    </svg>
  );
}

个字符
DividerIMG的
奇怪的是，我可以看到类被应用在开发工具class="fill-cyan-950"中，但正如你在上面的图像中看到的那样，它没有显示在屏幕上（它是黑色的，应该是深蓝色/绿色）。如果我在代码中显式地这样做，而不使用props，它就能按预期工作。

next.js

来源：https://stackoverflow.com/questions/76789520/fill-for-svg-path-not-applying

1条答案

按热度按时间

wqlqzqxt1#

根据文件：
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>

型
你可以考虑在props中传递完整的类名，比如：

<Divider topColor="fill-cyan-950" bottomColor="bg-slate-50" />

<svg
  …
  className={bottomColor}
>
  <path
    …
    className={topColor}
  ></path>
</svg>

的字符串

赞(0）回复(0）举报 2023-08-04

我来回答

next.js 未应用svg/path的填充[重复]

1条答案

相关问题

热门标签

最新问答