How Can I Change The Background Color Of A Leaflet Popup?

I'm creating a map using Leafletjs, and I'd like to change the background color of a popup (which is currently displaying and image and a link) from white to a different color. It

Solution 1:

After you call leaflet.css, you can include a <style> tag with the following rule to change the color of the popup and popup tip.

.leaflet-popup-content-wrapper, .leaflet-popup.tip {
  background-color: #000
}

Here's a screenshot I took after I edited background-color of a popup on Leaflet's homepage. Let me know if you have any more questions. Cheers.

Solution 2:

Open leaflet.css and search for:

.leaflet-popup-content-wrapper,
    .leaflet-popup-tip {
    background: rgb(111, 51, 51);
    box-shadow: 03px14pxrgba(0,0,0,0.4);
}

Then change the background value to whatever color you want.

Solution 3:

      const marker = new L.marker(lastPoint, {
        icon: markerIconSnake
      }).bindPopup(getDataInHtml(dataPopup), {
        className: 'stylePopup'
      })

If you want to change the background color of a popup you can use the method .bindPopup (in your marker) and add a css class.

    .stylePopup .leaflet-popup-content-wrapper,
    .stylePopup .leaflet-popup-tip {
        background-color: #f4913b;
        padding: 8px;
    }

If you wanna know more head to the docs!

Solution 4:

In my case I'm using react-leaflet v2 and wasn't able to use css in js with material/core/styles. I created a function

constupdatePopupCss = (color) => {
    let popupElement = document.getElementsByClassName("leaflet-popup-content-wrapper");
    let htmlPopupElement;
    if (popupElement[0] instanceofHTMLElement) {
        htmlPopupElement = popupElement[0] asHTMLElement;
        htmlPopupElement.style.backgroundColor = color;
        console.log(htmlPopupElement)
    }
}

Then called it from the onOpen attribute like so

 <Popup onOpen={() => {updatePopupCss("#036597")}} >