Lightning OverlayLibrary Background Color for Header and Body

Question

I just want to modify the background color of whole header section and body of my lightning overlayLibrary.

here is my code :

Popup Component

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" controller="PopupController">
<!--<aura:handler name="init" value="{!this}" action="{!c.initialize}" />-->
<lightning:overlayLibrary aura:id="overlayLib" />
<lightning:button name="modal" label="Show Modal" onclick=" 
{!c.handleShowModal}"/>

</aura:component>

PopupController

 ({
   handleShowModal : function(component) {

    console.log('DBG: inside handleShowModal');
    var modalBody;
    var modalHeader;
    $A.createComponents([
            ["c:ModalContent", {}],
            ["c:ModalHeader", {}]
        ],
        function(content, status) {
            console.log('DBG: content >>> ' + content);
            console.log('DBG: status >>> ' + status);
            if (status === "SUCCESS") {
                modalBody = content[0];
                modalHeader = content[1];
                component.find('overlayLib').showCustomModal({
                    header: modalHeader,
                    body: modalBody, 
                    showCloseButton: true,
                    cssClass: "mymodal",
                    closeCallback: function() {
                        alert('You closed the alert!');
                    }
                })
            }
        }
    );
}
})

ModelContent :

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
<div>
    <p>
        You are now eligible for our exclusive <b>Melbourne International Flower and Garden Show offer!</b>
    </p>
</div>

ModalHeader :

<aura:component >
<h1>CONGRATULATIONS!</h1>
</aura:component>

I appreciate your response!

Answer 1

You can do this by using custom CSS classes, some of which is already added in the the Line 21 of your PopupController

But, any custom CSS class you add must be accompanied by the cMyCmp class, where c is your namespace and MyCmp is the name of the component that creates the modal. Adding this class ensures that the custom styling is properly scoped.

For example, if the name of your component is PopupComponent or popupComponent, its CSS class would be cPopupComponent.

In the PopupController that you have shared in the question, Line 21, there is the property cssClass: "mymodal",. Please add your component class to this property, something like this cssClass: "cPopupComponent myModal",

And then the CSS for the background color(this goes in component style part of your PopupComponent, where there is the lightning:overlayLibrary):

/*Modal Header*/
.THIS.myModal .slds-modal__header{
 background: #e22319; 
} 

/*Modal Body*/
.THIS.myModal .slds-modal__content{
 background: #e6ee6e; 
}

And that's it!

I hope this helps! :)