我正在创建一个可重用的组件按钮,我想将两个 Tailwind 类作为道具传递给该按钮并动态使用它们。
这是我的组件:
function Button({ primary, secondry, label, onClick }) {
return (
<button
onClick={(e) => onClick(e)}
className={`bg-${primary} py-0.5 px-3 rounded text-white font-semibold text-xl border-2 border-${primary} hover:bg-${secondry} hover:text-${primary} cursor-pointer duration-300`}
>
{label}
</button>
);
}
这就是我使用该组件的方式:
<Button
label={"Cancel"}
primary="red-700"
secondry="zinc-900"
onClick={(e) => navigate("/customers")}
/>
然而,这些课程并未被应用。它看起来是这样的:
尝试传递整个字符串bg-red-700
像这样像这样
function Button({ bgprimary, textprimary, borderprimary, bgsecondary, label, onClick }) {
return (
<button
onClick={(e) => onClick(e)}
className={`${bgprimary} py-0.5 px-3 rounded text-white font-semibold text-xl border-2 ${borderprimary} hover:${bgsecondary} hover:${textprimary} cursor-pointer duration-300`}
>
{label}
</button>
);
}
并像这样使用它
<Button
label={"Cancel"}
bgprimary="bg-red-700"
textprimary="text-red-700"
borderprimary="border-red-700"
bgsecondary="bg-zinc-900"
onClick={(e) => navigate("/customers")}
/>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)