顺风CSS在组件之间不起作用

Question

所以我创建了一个按钮组件，我在其中传递了 btn 外观的道具。 但是当我尝试使用道具时，道具不起作用。 我不认为这是我的代码的问题，因为如果您首先在 btn 文件中手动使用颜色，编译它，然后将它们用作道具，它仅适用于该颜色

src/Button.js

import React from "react";

function Button({ text, img, textColor, bg, hoverBg }) {
  console.log(hoverBg);
  return (
    <button
      className={`flex-center h-10 w-full ring-1 ring-gray-300 rounded-full bg-${bg} hover:bg-${hoverBg}`}
    >
      <img src={img} alt="button-img" className="h-6" />
      <h1 className={`font-bold text-${textColor}`}>{text}</h1>
    </button>
  );
}

export default Button;

src/pages/Register.page.js（我使用按钮组合的页面）

import React from "react";

function Button({ text, img, textColor, bg, hoverBg }) {
  console.log(hoverBg);
  return (
    <button
      className={`flex-center h-10 w-full ring-1 ring-gray-300 rounded-full bg-${bg} hover:bg-${hoverBg}`}
    >
      <img src={img} alt="button-img" className="h-6" />
      <h1 className={`font-bold text-${textColor}`}>{text}</h1>
    </button>
  );
}

export default Button;

Answer 1

TailwindCSS 不允许您动态生成类。 因此，当您使用以下内容生成类时... text-${textColor} 作为字符串。

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

您必须返回完整的字符串，而不是仅从道具中返回颜色。 就像在你的道具中一样，如果textColor返回red-600那么你必须让它返回像text-red-600这样的字符串。

此外，您可以在此处查看我的答案如何动态填充 tailwindcss grid-cols-x 属性？

Answer 2

它正在使用风格：

<div style={{ backgroundImage: classBackgroundImage}}>
      </div>