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

【问题标题】：Conditionally set background color in React component with Tailwind CSS使用 Tailwind CSS 在 React 组件中有条件地设置背景颜色
【发布时间】：2022-12-29 16:49:05
【问题描述】：

我正在尝试使用通过道具传递的十六进制颜色代码来设置 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 值会导致透明背景（未应用背景效果）。

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

【问题讨论】：

标签： reactjs tailwind-css

【解决方案1】：

不幸的是，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;

您可以查看here 和here 以了解有关 Tailwind 如何生成任意样式的更多信息。

【讨论】：