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

Question

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

我怎样才能做到这一点？我不能传递类名...

Answer 1

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

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

和

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

也许您需要输入StandAloneSearchBox，因为有时谷歌地图会忽略父 div。如果问题仍然存在，请告诉我。