为什么我不能使用 CSS 来设置 InfoWindows 中元素的样式？

Question

我正在尝试更改 InfoWindows 中元素的字体大小。我的 InfoWindow 的代码如下所示：

<InfoWindow 
          marker={this.state.activeMarker}
          visible={this.state.showingInfoWindow}
          onClose={this.onClose}
        >
          <div>
            <h1>{this.state.selectedPlace.name}</h1>
            <h4>{this.state.selectedPlace.busy}</h4>
          </div>
</InfoWindow>

如果我尝试使用 CSS 来设置 h1 和 h4 等元素的样式，没有任何反应，信息 windows 中的元素不会改变 :/

//inside a CSS file that I import
h1 {
  font-size: 20px;
}

有人知道解决办法吗？从其他帖子我了解到实际的 InfoWindows 很难编辑，但我认为它们的子元素不应该是这样吗？

Answer 1

对于 infoWindow，您可以覆盖 .gm-style .gm-style-iw 的值，如所述here。

您可以在 CSS 文件中添加类似这样的内容来更改信息窗口的样式：

.gm-style .gm-style-iw {
    font-size: 20px;
}

当您在 ReactJS 代码中调用 InfoWindow 时，您也可以像这样使用不同的样式元素。:

<InfoWindow>
                 <div>
                 <h1 id="firstHeading" class="firstHeading">Heading!</h1>
                 <span>This is InfoWindow message!</span>
              </div>
             </InfoWindow>

这是 sample code where I use react-google-maps library. Make sure to change the value of the API key in the index.js 代码文件运行。

这里还有一个 sample code，我在普通 JavaScript 代码中使用 CSS 更改了信息窗口样式。

希望对您有所帮助！

为什么我不能使用 CSS 来设置 InfoWindows 中元素的样式？

Why Can I Not Use CSS To Style Elements Inside InfoWindows?

html

css

google-maps-api-3

reactjs