next.js 为什么我不能在tailwindcss中设置背景颜色？

ukqbszuj 于 2023-04-20 发布在其他

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

我正试图设置css的动态，所以在哪里是代码在哪里即时通讯设置代码

export default function ThingCard({
    title,
    background = "#2B5CEA",
    icon,
    href,
}: ThingCardProps) {
    return (
        <Link
            href={href}
            rel="noreferrer"
            target="_blank"
            className={`hover:bg-[${background}] p-2 rounded-xl text-gray-400 bg-gray-800 hover:shadow-xl transition-all flex items-center`}
        >
            <span
                className="inline-flex items-center justify-center w-8 h-8 md:w-11 md:h-11 bg-gray-800 rounded-lg mr-3 shrink-0"
                style={{ backgroundColor: background }}
            >
                <span className="relative w-4 h-4 md:w-6 md:h-6">
                    <Image
                        src={icon}
                        fill
                        alt={title}
                    />
                </span>
            </span>

            <h4 className="text-sm md:text-base lg:text-lg font-bold text-gray-200 truncate">
                {title}
            </h4>
        </Link>
    );
}

送这样的 prop

<ThingCard
            title="VS Code"
            background="#0065A9"
            icon="/svg/stacks/vscode.svg"
            href="https://code.visualstudio.com/"
          />
          <ThingCard
            title="Github"
            background="#070A52"
            icon="/svg/stacks/github.svg"
            href="https://hyper.is/"
          />

问题是背景颜色在vscode thingCard中工作正常，但在github thingcard中不工作，为什么？？

next.js

来源：https://stackoverflow.com/questions/76020347/why-i-cant-able-to-set-background-color-in-tailwindcss

1条答案

按热度按时间

8ftvxx2r1#

问题可能是你传递background属性到ThingCard组件的方式，你传递background作为一个字符串，前面有一个散列符号，比如background="#0065A9”。

export default function ThingCard({
  title,
  background = "2B5CEA",
  icon,
  href,
}: ThingCardProps) {
  return (
    <Link
      href={href}
      rel="noreferrer"
      target="_blank"
      className="hover:bg-gray-700 p-2 rounded-xl text-gray-400 bg-gray-800 hover:shadow-xl transition-all flex items-center"
      style={{ backgroundColor: `#${background}` }}
    >
      <span
        className="inline-flex items-center justify-center w-8 h-8 md:w-11 md:h-11 bg-gray-800 rounded-lg mr-3 shrink-0"
        style={{ backgroundColor: `#${background}` }}
      >
        <span className="relative w-4 h-4 md:w-6 md:h-6">
          <Image src={icon} fill alt={title} />
        </span>
      </span>

      <h4 className="text-sm md:text-base lg:text-lg font-bold text-gray-200 truncate">
        {title}
      </h4>
    </Link>
  );
}

现在我们使用#${background}来设置className字符串和style对象中的backgroundColor属性。这确保了背景属性的使用一致，并且没有任何额外的字符。

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

我来回答

next.js 为什么我不能在tailwindcss中设置背景颜色？

1条答案

相关问题

热门标签

最新问答