相关疑难解决方法(0)

我正在尝试制作一个反应组件来更改参数的宽度，但它不起作用，我不知道为什么。

function Bar() {
    
    const p =80

    const style = `bg-slate-500 h-8 w-[${p.toFixed(1)}%]`

    console.log(style)

    return (
        <div className=' h-8 w-full'>
            <div className={`bg-slate-500 h-8 w-[${p}%]`}>
            </div>
        </div>
    )
}
export default Bar

通过这段代码，我得到了一个全尺寸的条，但如果我使用 80.0 的严格字符串，它就可以正常工作

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

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