更改传单弹出窗口的背景颜色

Question

我使用传单并做出反应。我需要更改一些弹出样式，例如背景颜色。

打开一个window我用代码

marker.bindPopup(content,{className: 'custom-style'});

主要问题是我从后端获取样式，每个弹出窗口的样式都不一样。

因为样式不同所以我不能使用这个解决方案

.custom-style .leaflet-popup-content-wrapper,
.custom-style .leaflet-popup-tip {
    background-color: #f4913b;
}

如何为弹出窗口正确分配自定义样式？

Answer 1

您可以在 marker.getPopup().getElement() 上获取 Popup HTML 元素，然后为其添加样式。

重要的是先在地图上添加marker，然后将弹窗绑定到marker上直接打开！添加样式后可以再次关闭弹窗。

var marker = L.marker(map.getCenter()).addTo(map).bindPopup("Test").openPopup();

marker.getPopup().getElement().children[0].style.background = 'red'; // content
marker.getPopup().getElement().children[1].children[0].style.background = 'red'; // tip

marker.closePopup();

演示：https://plnkr.co/edit/ll8kjCocyWaueI8y

Answer 2

只需一行代码：

background-color: yellow !important;

基本上，在 CSS 文件中更改这部分，并且不要忘记添加 !important.

.leaflet-popup-content-wrapper {
padding: 10px;
text-align: center;
background-color: yellow !important;
}

更改传单弹出窗口的背景颜色

Change background color of leaflet popup

leaflet

react-leaflet