[Bug] Prop `style` does not unset properties that become `undefined`

[maritaria]

Description

In the following snippet:

<MapGLMarker
        latitude={location.coordinates.latitude}
        longitude={location.coordinates.longitude}
        anchor="bottom"
        style={{
          ...(condition
            ? { background: 'red', }
            : { background: undefined, }), // Note: similar problem if just passing {}
        }}
      >

Expected Behavior

When condition goes from true to false, the background attribute is un-set on the element.

Steps to Reproduce

Reproduction: https://codesandbox.io/p/sandbox/long-rgb-6f4mdv

Code snippet

import * as React from "react";
import { createRoot } from "react-dom/client";
import Map, { Marker } from "react-map-gl";

import "mapbox-gl/dist/mapbox-gl.css";

function Root() {
  const [state, setState] = React.useState(false);
  return (
    <>
      <button onClick={() => setState(!state)}>
        background: {state ? "on" : "off"}
      </button>
      <Map
        initialViewState={{
          latitude: 37.8,
          longitude: -122.4,
          zoom: 14,
        }}
        style={{ width: "100vw", height: "100vh" }}
        mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
      >
        <Marker
          longitude={-122.4}
          latitude={37.8}
          style={{
            ...(state ? { background: "red" } : { background: undefined }), // Note: similar problem if just passing {}
          }}
        />
      </Map>
    </>
  );
}

/* global document */
createRoot(document.getElementById("app")).render(<Root />);

Environment

• Framework version: react-map-gl@8.1.1 (in my project; reproduction template used ^7.1.0)
• Map library: mapbox-gl@3.24.0
• Browser: (not relevant)
• OS: (not relevant)

Logs

No logging produced

[maritaria]

Looking at the source, the useEffect that updates based on style does not remember the previous properties written, nor does it register an un-mount callback.

The solution would be to either return a callback to un-set or to remember the keys modified from the previous invocation (e.g. using a ref). The keys that need to be unset can be detected as keys that were previously non-undefined and are undefined (explicitly or absent).

Test cases are {background: 'value'} -> {background: undefined} and {background: 'value'} -> {}, in both cases background needs to be unset within the marker's style attribute.

[maritaria]

See useEffect in Marker`:

react-map-gl/modules/react-mapbox/src/components/marker.ts

Lines 99 to 101 in a4050bc

	useEffect(() => {
	applyReactStyle(marker.getElement(), style);
	}, [style]);

See applyReactStyle utility:

react-map-gl/modules/react-mapbox/src/utils/apply-react-style.ts

Line 6 in a4050bc

export function applyReactStyle(element: HTMLElement, styles: React.CSSProperties) {

The function seems to also exist in the maplibre variant, so the bug may also exist there.

[MohammadYusif]

I traced this to applyReactStyle (modules/react-mapbox/src/utils/apply-react-style.ts and the maplibre equivalent): it only writes the keys present in the incoming style object and never unsets keys that were previously applied but are now undefined or omitted — assigning undefined to a CSS property is a no-op, so the old value lingers. I'm planning to fix it by tracking the keys applied to each element (via a WeakMap) and clearing any that are no longer present on the next update, with regression tests for both the {background: undefined} and {} cases. Happy to adjust if you'd prefer the bookkeeping to live in the Marker effect instead.