How to change react-map-gl geolocation indicator color?

[DoneDeal0]

I have a map made with react-map-gl. It works fine, but I can't change the color of the geolocation indicator.

Here is the code:

<ReactMapGL
        {...viewport}
        mapboxApiAccessToken={ACCESS_TOKEN}
        attributionControl={false}
        mapStyle={mapStyle}
        width="100%"
        height="100%"
        onViewportChange={(viewport) => setViewport(viewport)}
      >
        <GeolocateControl
          style={{ color: "red", background: "green", fill: "red" }} // doesn't work
          positionOptions={positionOptions}
          trackUserLocation
          auto
        />
      </ReactMapGL>

How to fix this? Also, is it possible to change the color of the geolocator update button(located at the top left of the map)?

[duran-0519]

Hello, although I have not used react-map-gl, but I hope my answer can help you, example: let box=document.getElementById("box"); box.remove(); delete it, and then Create a new DOM node through document.createElement("h2") and give it a name to manipulate it through CSS.