How to move react-map-gl-geocoder position to the right

Question

I'm using a Geocoder element with my Mapbox map - specifically react-map-gl-geocoder. I'm wanting to move the element to the right but I can't seem to override the styles given to it.

In the image below, you can see the search at the top-left corner. I want to be able to apply some sort of margin-left/left with a value of 50 so that it is next to the map navigation buttons.

Using className nested with the geocoder does not work.

    <Geocoder
      mapRef={mapRef}
      mapboxApiAccessToken={process.env.SOME_MAPBOX_API_KEY}
      onViewportChange={(viewport) => setViewport(viewport)}
      transitionDuration={1000}
      position="top-left" // To determine set position of geocoder search bar
    />

Answer 1

You can try adding a CSS rule that more specifically targets the element you want to affect. E.g, the one you want to change is .mapboxg1-ctrl-top-left, so you should try and overwrite it by using .mapboxg1-control-container .mapboxg1-ctrl-top-left. If that doesn't work, as a last resort you can try introduce the !important directive.

// try first
.mapboxg1-control-container .mapboxg1-ctrl-top-left {
    left: 50px;
}

// if the above doesnt work, then use !important
.mapboxg1-control-container .mapboxg1-ctrl-top-left {
    left: 50px !important;
}

Answer 2

I found the solution - there is a property called containerRef that allows you to style the Geocoder and place where you want

https://www.npmjs.com/package/react-map-gl-geocoder