Search code examples
reactjsgoogle-mapsgoogle-places-apireact-google-maps

react-google-maps: How can I dynamically style the Google container (.pac-container) of multiple StandaloneSearchBox components?

The container of the Google Places searchbox that is created with react-google-maps has class called .pac-container. Now, I've got multiple of those on one page and I want to style them differently. For example, one should drop upwards, another one downwards.

How can I achieve this? I can't pass down a class name...

Solution

  • you can wrap you StandAloneSearchBox with with a parent wrapper.

    <div className="ancestor1"><StandAloneSearchBox></div>
<div className="ancestor2"><StandAloneSearchBox></div>

    And

    .ancestor1 .pac-container
.ancestor2 .pac-container

    Maybe you need to put inside StandAloneSearchBox because sometimes google maps ignore parent div. Do let me know if the issue still persists.