Forward className and style to div.mapboxgl-marker element in Marker component

[kaitlynbrown]

Is your feature request related to a problem? Please describe.
I would like to add a z-index to certain markers on my map to ensure they show up in front of other markers that might be overlapping. The normal way to do this would be to add either a css class or inline style on the div containers for those markers. However, because neither className nor style is forwarded to the div that contains the marker contents, this isn't currently possible to do.

Describe the solution you'd like
Forward className and style to div.mapboxgl-marker

Describe alternatives you've considered
I'm using the following (very hacky) code to add a className to the marker containers after the map has loaded, but this isn't reliable, because there are many things that can happen to cause the class to be removed:

  useEffect(() => {
    // HACK: There doesn't seem to be any react-friendly way to add css classes or styles to Marker elements
    if (!unclusteredClinics?.length) {
      return;
    }
    const interval = setInterval(() => {
      const unclusteredElements = document.querySelectorAll(
        '.clinic-marker-unclustered'
      );
      if (!unclusteredElements.length) {
        return;
      }
      unclusteredElements.forEach(el =>
        el.parentElement.classList.add('clinic-marker-unclustered-container')
      );
      clearInterval(interval);
    }, 50);
  }, [clinics]);