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 :
Custom css classes
reactjs-popup provides a
className prop, but you need to be carful using this class in your CSS as we add
-arrow, which mean you need to add style for
Lets assume you are going to add a className prop called
my-popup, your css should look like the following :
Support Multiple themes
Check our custom css styling for docs website which support dark and light themes: