cssClass attribute in lightning:overlayLibrary not working

I am looking to implement a large modal using lightning:overlayLibrary. Please see .slds-modal_large size option demonstrated here for clarity. But I am having trouble getting the cssClass attribute to work. Can someone shed some light here please?

COMPONENT c:modalContent:

<aura:component>    
    <lightning:overlayLibrary aura:id="overlayLib"/>
    <lightning:button name="modal" label="Show Modal" onclick="{!c.handleShowModal}"/>
</aura:component>

CONTROLLER JS:

({    
    handleShowModal: function(component, evt, helper) {
        var modalBody;
        $A.createComponent("c:modalContent", {},
                           function(content, status) {
                               if (status === "SUCCESS") {
                                   modalBody = content;
                                   component.find('overlayLib').showCustomModal({
                                       header: "Modal Header Goes Here",
                                       body: modalBody, 
                                       showCloseButton: true,
                                       cssClass: "myModalClass", /* This doesn't work? */
                                       closeCallback: function() {
                                           alert('Modal closed!');
                                       }
                                   })

                               }

                           });
    }
})

STYLE:

.THIS .myModalClass{
     background-color: coral !important;
     width: 75% !important;
     min-width: 50rem !important;
     max-width: 150rem !important;
}

Answer

The issue is mainly corresponded to lightning component shadow DOM: all custom component’s css classes are placed in DOM style as .COMPONENT_NAME.CUSTOM_CLASS {...}.

In the same time lightning:ovelayLibrary put modal panel outside your component shadow DOM. That’s why if you need to add some custom css to this modal it is necessary to provide full path to your custom css:
at showCustomModal():

cssClass: component.getName() + " myModalClass",

at .css file:

.THIS.myModalClass .modal-body { // myModalClass will apply to modal body
    ...
}

Please note, that .THIS and .myModalClass have to be concatenated without any spaces, because they are related to the same html tag.

Attribution
Source : Link , Question Author : Lightning Evangelist , Answer Author : Vladimir

Leave a Comment