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:

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


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




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


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.

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

Leave a Comment