reactjs - 设置 IconContext.Provider 光标值？（这与反应图标一起使用）

Question

我知道我可以将光标内联样式：“悬停”到本示例中的元素上，但是应该有一种方法可以使用 react-icons 中的 IconContex.Provider 使元素中的所有图标包含指针光标

       return (
        <>
            <IconContext.Provider value={{
                color: "red",
                size: "1.2em",
                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>
        </>
    )
}

Answer 1

只需pointer在style属性下添加，或作为className：

.withPointer {
  cursor: 'pointer';
}

const App = () => {
  return (
    // Use style or className
    <IconContext.Provider
      value={{ color: "blue", style: { cursor: "pointer" }, className: 'withPointer' }}
    >
      <div>
        Hello <FaBeer />
      </div>
    </IconContext.Provider>
  );
};