Skip to main content

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;}