我正在使用Storybook在React中创建一个组件。看看我的代码：
<button class="btn py-4 px-16 border-0 outline-0 relative rounded-full cursor-pointer
after:content-[attr(data-text)] after:text-xl
after:bg-gradient-to-r after:from-[#F1B08D] after:to-[#DC675D] bg-gradient-to-r from-[#F1B08D] to-[#DC675D] " data-text="Click me!"></button>不幸的是，after:to-[#DC675D]不工作。
我期待这样的输出：
但我得到了这个：
在样式中，after:to-[#DC675D]未显示：
这是我在React上做的：
const colors = color?.split(" ");
const newColors = colors?.map((color) => `after:${color}`).join(" ");
console.log(newColors);
return (
<button
className={`btn py-4 px-16 border-0 outline-0 relative rounded-full cursor-pointer
after:content-[attr(data-text)] after:text-xl
${newColors} ${blocked ? "w-full" : ""} ${color} ${classes}`}
onClick={onClick}
data-text={text}
></button>
);其中color值为：bg-gradient-to-r from-[#F1B08D] to-[#DC675D]
我在ChatGPT上搜索过，但没有找到。非常感谢你的答复。谢谢！
1条答案
按热度按时间8zzbczxx1#
您可以使用CSS自定义属性（变量）来设置颜色，如下所示：
https://play.tailwindcss.com/RhtnKCOXpl
因此类
after:to-[--endcolor]使用自定义属性--endcolor，该属性是使用style属性style="--endcolor: #DC675D"设置的。在React中，你可以设置值，然后在style属性中使用它。