Change the Background Color of a React Leaflet Popup with CSS Selectors
We were able to tweak the styles to make the text look more readable, but we didn't do much else. This is your chance to go wild - you can update the background color, change the text color, or do something fancy!
Colby Fayock: [0:00] These popups look pretty decent. What if I wanted to change them to look more like the theme? We can see in the HTML that each of the pop up, it's a className of Leaflet popup.
[0:07] If you look at the leaflet-popup-content-wrapper, you can see that's where it's actually getting the background color of white. We can also see that this is setting the leaflet-popup-tip, which is the bottom piece here.
[0:15] If we copy the selector and we move it into our code, we can create a new set of styles. I'm going to set a background-color to blue violet. Now, if I look on my browser, I can see that that's overriding the way and it's making it blue violet.
[0:26] That's hard to read now. How can I fix that? First, I can set the color.selector to white, which updates all the text, but I can create another selector for all the links and set those to cyan. Now, I can see my updated link color. Finally, I don't think these rounded borders fit in. I'm also going to set my border-radius to zero. Now, I have my popups with the sharp edge.