使用 tailwindcss 和 nextjs 不改变边框颜色

Question

当我从父母那里传递 borderColor 时，它不起作用。 当我对其进行硬编码时，它可以工作，

export const SecondaryButton = ({
  borderColor = "secondary",
  text = "Button",
  to,
  hoverBg = "primary",
  hoverText = "white",
  hoverBorder = "primary",
  textColor = "white",
}) => {
  const cn = `hover:border-${hoverBorder} hover:bg-${hoverBg} hover:text-${hoverText} block px-[3rem] py-[1rem] rounded-md text-${textColor} font-medium border-2 mt-[2rem] transition-colors ease-in-out duration-300 border-${borderColor}`;
  return (
    <>
      <button
        className={cn}
        >
        {text}
      </button>
    </>
  );
};

父组件

const Right = () => (
  <div className="right px-[10rem] w-1/2">
    <h2 className="text-5xl custom-border-bottom">ABOUT US</h2>
    <p className="mt-[3rem] text-2xl">
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
    
    <SecondaryButton text="Learn More" borderColor="blue" textColor="gray" />
  </div>
);

正如您在下面看到的，边框仍然是浅灰色而不是蓝色，

下面是放置硬编码值后的图像

Answer 1

TailwindCSS 不允许您动态生成类。因此，当您使用以下内容生成类时……

const cn = `hover:border-${hoverBorder} hover:bg-${hoverBg} hover:text-${hoverText} block px-[3rem] py-[1rem] rounded-md text-${textColor} font-medium border-2 mt-[2rem] transition-colors ease-in-out duration-300 border-${borderColor}`;

...TailwindCSS 不会将其作为有效的 TailwindCSS 类，因此不会生成必要的 CSS。

尝试用这个替换cn的值

const cn = "hover:border-" +hoverBorder+ " hover:bg-" +hoverBg+ "hover:text-" +hoverText+ " block px-[3rem] py-[1rem] rounded-md text-" +textColor+ " font-medium border-2 mt-[2rem] transition-colors ease-in-out duration-300 border-"+ borderColor;