react-google-maps：如何动态设置多个 StandaloneSearchBox 组件的 Google 容器 (.pac-container) 的样式？

Question

使用 react-google-maps 创建的 Google Places 搜索框的容器有 class 调用 .pac-container。现在，我在一页上有多个，我想用不同的方式设置它们的样式。例如，一个应该向上下降，另一个应该向下下降。

我怎样才能做到这一点？我无法传递 class 名字...

Answer 1

您可以使用父包装器包装 StandAloneSearchBox。

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

和

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

也许你需要把 StandAloneSearchBox 放在里面，因为有时 google 映射会忽略父 div。如果问题仍然存在，请告诉我。