如何为react-icons的IconContext.Provider配置cursor属性值

失效原因 #

• react-icons 的 IconContext.Provider 官方默认支持的配置字段仅包含color、size、className、style、attr几个，你直接在根配置对象中传入cursor字段不属于官方识别的有效字段，不会被注入到最终渲染的SVG图标元素上，因此配置不生效。

正确配置方式 #

把自定义的cursor样式放到style配置项内即可，style字段接收的样式对象会被完整应用到所有Provider包裹下的react-icons图标，修正后的代码如下：

return (
  <>
    <IconContext.Provider value={{
        color: "red",
        size: "1.2em",
        // 自定义样式统一放到style字段中
        style: {
          cursor: "pointer"
        }
    }}>
        <StyledTask>
            <h3 className="ms-2" >{task.text} <FaTimes onClick={() => { onDelete(task.id) }}></FaTimes></h3>
            <p className="ms-2 mt-2">{task.day}</p>
        </StyledTask>
    </IconContext.Provider>
  </>
)

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