1

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
    />

enter image description here

KleinESK
  • 85
  • 7

2 Answers2

1

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

paul blackmore
  • 191
  • 2
  • 13
0

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;
}
Bjorn.B
  • 1,473
  • 1
  • 10
  • 11
  • Hi, im using React and imported the component. Where would I override the class? Thanks! – KleinESK Sep 16 '20 at 06:18
  • You could either put the style in the projects main CSS file (if there is one), or just create a new style.css file, add the rule to that file, and then import the new CSS file at the top of the component, e.g, import './App.css';. – Bjorn.B Sep 16 '20 at 07:16