Ad

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

Ad

Answer

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.

Ad
source: stackoverflow.com
Ad