React状态变量值已更新，但绑定的UI图标未同步渲染问题

问题成因 #

你的React状态更新、组件重渲染逻辑完全正常，问题出在Icon组件的属性使用错误：
你给<span>标签绑定的color={color}是HTML自定义属性，既不是浏览器识别的样式规则，也不是Iconify库约定的配色参数，所以哪怕该属性值随状态更新发生了变化，也不会影响图标的实际渲染颜色。你测试时绑定同一状态的文本可以正常更新，就已经验证了React渲染链路是正常的。

修复方案 #

Iconify图标默认会继承父元素的文本颜色，你可以任选以下一种方案修复：

方案1：给图标元素添加内联颜色样式 #

修改Icon组件，把传入的color值绑定到内联样式上：

function Icon({icon, color, name}) {
    return (
        <div>
        <span style={{ color }} className="iconify h-10 w-auto self-center" data-icon={icon}></span>
        </div>
    )
}

方案2：父按钮动态控制文本颜色（更简洁） #

直接在NavButton组件上动态设置文本颜色，图标会自动继承该颜色，不需要单独给Icon传color参数：

function NavButton({button, onToggle}){
    return (
        <button 
            onClick={() => onToggle(button.id)} 
            className={`font-bold flex flex-col items-center justify-center flex-grow w-5 hover:bg-gray-100 ${button.active ? "text-[#454545]" : "text-[#8b8b8b]"}`}
        >
            <p className="self-center">{button.name}</p>
            <Icon icon={button.icon} name={button.name}/>
        </button>
    )
}

内容的提问来源于stack exchange，提问作者restart it