Seeking guidance on customizing the design of the LPopup component in leafletjs. I found a helpful guide at:
https://i.sstatic.net/qEZol.png
After inspecting the Lpopup in the dev tools, I tried adding CSS styles to the 'leaflet-popup-content-wrapper' selector (please refer to the image below), but the border-radius: 0px property did not apply as expected within the popup.
<l-popup class="map-popup">
<h1>{{ name.toLocaleUpperCase().substring(0, 2) }}</h1>
<h3>{{ address }}</h3>
</l-popup>
My CSS code:
.map-popup,
.leaflet-popup-content-wrapper {
background: #2c3e50;
color: #fff;
font-size: 16px;
line-height: 24px;
border-radius: 0px;
}
// I also attempted this approach, but it didn't have the desired effect:
.leaflet-popup-content-wrapper {
background: #2c3e50;
color: #fff;
font-size: 16px;
line-height: 24px;
border-radius: 0px;
}
https://i.sstatic.net/Zdm4y.png
I am aiming for a look similar to the one shown below without the 'border-radius'. Any suggestions on how to achieve that would be greatly appreciated. Thank you in advance!