1. 43
    Change the Background Color of a React Leaflet Popup with CSS Selectors
    44s

Change the Background Color of a React Leaflet Popup with CSS Selectors

Colby Fayock
InstructorColby Fayock
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 4 years ago

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!

Click here for exercise instructions

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.

egghead
egghead
~ 7 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today