顺风样式不适用于条件

Question

我试图用Tailwind绘制一个组件，问题是如果我将“颜色”传递给该组件，它会绘制我发送给它的颜色，如果不是，它会绘制一个默认的color.The问题，即没有显示任何颜色。这是我的密码：

export default function UIStepBlurp({ ico, number, description, color }) {

    let styleCustomColor = `items-center justify-center pt-2 border-2 rounded-full text-[14px] flex absolute -left-4 bg-white -top-4 h-[33px] w-[33px] border-[${color}]`;
    let styleDefaultColor = "items-center justify-center pt-2 border-2 rounded-full text-[14px] flex absolute -left-4 bg-white -top-4 h-[33px] w-[33px] border-primary";

    return (
        <div className="flex relative w-[175px] h-[180px] shadow-lg bg-white rounded-xl px-[4px] flex-col items-center justify-start pt-[20px]" >
            <div className={`${color ? styleCustomColor : styleDefaultColor}`}>{number}</div> // here is the conditional.
            <div className="w-20 h-20 mb-[10px] bg-no-repeat bg-contain" style={{ backgroundImage: `url(${ico})` }} />
            <div className="text-[16px] leading-tight text-center mx-[10px] font-bold">{description}</div>
        </div>
    )
} 

这是我发送所有道具的代码：

 <UIStepBlurp number={1} ico="image" description="Accede al catálogo de cursos." color="#000" />

Answer 1

当将变量传递给任意值时，顺风将无法工作。您可以将此颜色传递到元素的样式中：

export const Example = ({ color }) => (
   <div style={{ borderColor: color }} />
)

或者，如果您想严格使用Tailwind，您可以创建一个包含您希望使用的所有颜色的枚举，然后用正在传递的道具选择颜色/类：

const COLORS = {
  COLOR_A: "border-[#000]",
  COLOR_B: "border-[#fff]",
}

export const Example = ({ color }) => (
   <div className={`class-1 class-2 ${COLORS[color]}`} />
)