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

Question

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

score 1 · Accepted Answer · answered Aug 20 '18 at 10:59

1

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.

answered Aug 20 '18 at 10:59

Sakhi Mansoor

7,832
5
22
37

1

I didn't try it yet but this sounds like the right thing to do – Pim van der Heijden Sep 10 '18 at 18:04
sorry, did this work? I'm trying and it's not working for me :( – wei Nov 19 '19 at 00:33

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

1 Answers1