tailwind css 组件之间不工作

Question

所以我创建了一个按钮组件，我在其中传递了按钮外观的道具。但是当我尝试使用道具时，道具不起作用。我不认为这是我的代码的问题，因为如果您首先在 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

它的工作风格：

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

Answer 2

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

…TailwindCSS 不会将其作为有效的 TailwindCSS class 选择，因此不会产生必要的 CSS.

您必须 return 完整的字符串，而不是仅来自道具的颜色。就像在你的道具中一样，如果 textColor 是 returning red-600 那么你必须将它变成 return 字符串，例如 text-red-600.

另外你可以在这里看到我的回答

tailwind css 组件之间不工作

tailwind css not working between components

html

javascript

css

reactjs

tailwind-css