React-Select动态设置图标颜色报错TypeError及颜色方块实现问题

你遇到的TypeError: Cannot convert a Symbol value to a string错误，是因为在模板字符串里给className多套了一层双引号，导致生成的className值是带引号的字符串（比如"text-[#ff0000] capitalize"），react-select解析时无法正确处理这种格式。

另外，react-select的选项渲染是基于label字段的，你不需要额外加bg属性，直接把颜色方块和文本整合到label的JSX里即可。

修改后的代码： #

const getDropdownOption = (element) => {
  return {
    label: (
      <div className="flex items-center gap-2">
        <BsSquareFill className={`text-[${element.color}] capitalize`} />
        <span>{element.value}</span>
      </div>
    ),
    value: element.id,
    color: "#fff",
  };
};

关键修正点： #

• 移除了className里多余的双引号，直接用text-[${element.color}]动态绑定颜色
• 将label改为包含颜色方块和文本的flex容器，实现选项前显示对应颜色的效果
• 确保element.color是有效的颜色格式（比如带#前缀的十六进制值，如#FF0000）

如果还是有问题，检查下data.severity和data.status里的每个元素是否确实包含color字段，且字段值格式正确。

内容的提问来源于stack exchange，提问作者Vikas Jyani