How to access and style individual controlls?

[VolteCoOfficial]

I want to access individual controlls on the map.
I don't like the look and I want to change the styles one by one.
This does not work.

Can I get some help please?

const map = useMap();

useEffect(() => {
  if (!map) return;

  // Access the StreetView button at the desired control position (e.g., TOP_LEFT)
  const streetViewControl = map.controls[google.maps.ControlPosition.BOTTOM_RIGHT];
  
  if (streetViewControl && streetViewControl.getLength() > 0) {
    // Get the first element in the control array which is the street view control button
    const button = streetViewControl.getArray()[0] as HTMLElement;
    
    if (button) {
      // Apply custom styles to the StreetView button
      button.style.backgroundColor = "#ffffff"; // Background color
      button.style.border = "2px solid #000000"; // Border
      button.style.borderRadius = "8px"; // Rounded corners
      button.style.padding = "5px"; // Padding
      button.style.boxShadow = "0px 4px 8px rgba(0,0,0,0.2)"; // Optional shadow for effect
    }
  }
}, [map]);

[VolteCoOfficial]

Oh never mind. I can just target it with css...

button.gm-svpc{
    border-radius: 0.3rem !important;
}

[usefulthink]

you can either do that or implement your own version of the control. But keep in mind that there is no guarantee that those css-selectors will continue working the same way as the maps API is updated (they seem to be very rarely touched though).

[hitecSmartHome]

Sucks that we dont get style options