How to updating z-index of Marker (Custom Overlay) when hovering on it (My sample uses Tailwindcss on the Marker component)

[asdutoit]

I have a map rendering some Markers. Hovering over a Marker will scale the marker using a Tailwindcss style. See below:

Issue I am having is that the z-index is not being updated on the marker being hovered. Upon inspecting the element I realised the z-index is in fact being updated, but its not visually reflected because the parent component (OverlayView) has a zIndex property applied. What is the correct way of overriding the parent component's z-index without having to use state updates in the Map component which will re-render the map component on each marker hover.

// Map.jsx component

export default function Map() {
... omitted
    <Marker
	key={`property-${cluster.properties.propertyId}`}
	lat={latitude}
	lng={longitude}
	currency="$"
	price={price}
	mapRef={mapRef}
	id={cluster.properties.propertyId}
	zIndex={1}
    />

// Marker.jsx

export default function Marker({
... omitted

  return (
	<div
           className={classNames(
	     id === currentSelectedID ? "selected" : "highlight",
	     "price-tag transition duration-150 cursor-pointer z-0 hover:scale-125 hover:z-50",
	   )}
	   onClick={onMarkerClick}
	   onKeyUp={onMarkerClick}
         >
	   {currency} {nFormatter(price, 0)}
	</div>
  );
}

[wabawden]

Since the markers have a grandparent with a named class ('google-map-markers-overlay'), you could do the following to target the parent
.google-map-markers-overlay > div:has(div.price-tag):hover { z-index: 50 !important; }

[asdutoit]

Thanks @wabawden , I will give that a try. Haven't been working on this specific issue in quite a while but will find a gap and revert with the result.

[giorgiabosello]

As soon as I am done with the exams at the University, I'll try to find a better solution for the inline style.
In the meantime, please, be patient and find other working solutions, even if they are temporary.
Thank you 🙏🏼