I think easiest think is to use style attribute.
const [variantColor, setVariantColor] = useState<string | undefined>(""); const colorOptions=["#00FFFF","#FAEBD7","#DC143C"]
{colorOptions?.map((color) => {
return (
<div key={index}
style={{
borderStyle: "solid",
borderColor:
variantColor === color ? ${color} : ${color}50,
}}
>
<div
onClick={() => setVariantColor(color)}
style={{
backgroundColor:
variantColor === color ? ${color} : ${color}50,
}}
/>
);
})
);
})}