gpt4 book ai didi

reactjs - 使用 Tailwind CSS 有条件地在 React 组件中设置背景颜色

转载 作者:行者123 更新时间:2023-12-05 01:04:47 28 4
gpt4 key购买 nike

我正在尝试使用通过 Prop 传递的十六进制颜色代码来设置 div 的背景颜色。这些是动态生成的一次性颜色,因此不能作为主题扩展添加到 tailwind.config 中。

我认为模板字面量是实现此目的的最佳方式,但无法使其与 Tailwind CSS 中的任意颜色值一起使用。

interface Props {
color: string;
}

const ColorSwatch = ({ color }: Props) => {
return (
<div className="flex flex-col gap-1 p-2">
<div
className={`h-20 w-20 border border-gray-400 shadow-md bg-[${color}]`}
></div>
<p className="text-center">{color}</p>
</div>
);
};

export default ColorSwatch;

将十六进制颜色代码直接粘贴到 className 列表会产生预期的结果,但尝试在模板文字中使用 prop 值会导致背景透明(未应用背景效果)。

寻求有关如何更正此方法或使用通过 Prop 传递的十六进制代码动态设置背景颜色的不同方法的建议。

最佳答案

不幸的是,Tailwind 需要将颜色硬编码到 className 属性中,因为它无法根据动态 className 值计算任意样式。

最好的办法是使用 style 属性设置背景颜色,如下所示;

interface Props {
color: string;
}

const ColorSwatch = ({ color }: Props) => {
return (
<div className="flex flex-col gap-1 p-2">
<div
className="h-20 w-20 border border-gray-400 shadow-md"
style={{backgroundColor: color}}
></div>
<p className="text-center">{color}</p>
</div>
);
};

export default ColorSwatch;

你可以看看herehere详细了解 Tailwind 如何生成任意样式。

关于reactjs - 使用 Tailwind CSS 有条件地在 React 组件中设置背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71413730/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com