是否设置IconContext.Provider游标值？(这与react-icons一起使用)

Question

我知道我可以在这个例子中内联光标："hover“到元素上，但是应该有一种方法来使一个元素中的所有图标都包含指针光标，使用来自react- 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

只需在style属性下添加pointer，或作为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>
  );
};

​

​