CSS Styling

To style your Popup component using CSS classes, you can use the className we already provide by default with component or use your custom className:

Default CSS classes

  • popup-content: to style popup content.
  • popup-overlay: to style popup overlay.
  • popup-arrow : to style popup arrow (arrow here is an svg element)

using those css class will override the following default style :

.popup-content {
margin: auto;
background: rgb(255, 255, 255);
width: 50%;
padding: 5px;
}
.popup-arrow {
color: rgb(255, 255, 255);
}
[role='tooltip'].popup-content {
width: 200px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 3px;
}
.popup-overlay {
background: rgba(0, 0, 0, 0.5);
}
[data-popup='tooltip'].popup-overlay {
background: transparent;
}

Custom css classes

reactjs-popup provides a className prop, but you need to be carful using this class in your CSS as we add -content , -overlay and -arrow, which mean you need to add style for className-popup,className-overlay,className-arrow:

Lets assume you are going to add a className prop called my-popup, your css should look like the following :

.my-popup-content {
margin: auto;
background: rgb(255, 255, 255);
width: 50%;
padding: 5px;
}
.my-popup-arrow {
color: rgb(255, 255, 255);
}
[role='tooltip'].my-popup-content {
width: 200px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 3px;
}
.my-popup-overlay {
background: rgba(0, 0, 0, 0.5);
}
[data-popup='tooltip'].my-popup-overlay {
background: transparent;
}

Support Multiple themes

Check our custom css styling for docs website which support dark and light themes:

.popup-content {
border-radius: 5px;
padding: 0.5rem;
}
html[data-theme='dark'] .popup-content {
background-color: rgb(41, 45, 62);
color: #fff;
border: 1px solid #9a9595;
}
html[data-theme='light'] .popup-content {
background-color: #fff;
color: #000;
border: 1px solid #d7d7d7;
}
html[data-theme='dark'] .popup-arrow > svg {
color: rgb(41, 45, 62);
stroke-width: 2px;
stroke: #9a9595;
stroke-dasharray: 30px;
stroke-dashoffset: -54px;
}
html[data-theme='light'] .popup-arrow > svg {
color: #fff;
stroke-width: 2px;
stroke: #d7d7d7;
stroke-dasharray: 30px;
stroke-dashoffset: -54px;
}