Change cursor on hover - has no affect

[newguy123-creator]

• three version: 0.169.0
• @react-three/fiber version: 8.17.10
• react-three-map version: 0.8.2
• node version: v20.11.1
• npm (or yarn) version: 10.2.4

Problem description:

Usually I can easily add code to my model tag in my canvas to change the cursor to a pointer in a regular R3F app, however this doesnt seem to work in react-three-map. No matter what I do, the cursor stays the "grab" cursor.

Relevant code:

<Model
    position={[-3.855, 0, 180.526]}
    onClick={handleClick}
    onPointerEnter={() => {
        document.body.style.cursor = "pointer";
    }}
    onPointerLeave={() => {
        document.body.style.cursor = "default";
    }}
/>

Suggested solution:

[RodrigoHamuy]

That's because Maplibre and Mapbox also have a cursor style. You can aim at the canvas instead of the document body to have priority in the CSS hierarchy.

[newguy123-creator]

That's because Maplibre and Mapbox also have a cursor style. You can aim at the canvas instead of the document body to have priority in the CSS hierarchy.

Yes I gathered that. The question therefore is, how can I overrirde it and make my style important?