Hide white background on LWC Component load

apexlightninglightning-design-systemlightning-web-components

When you load an lwc component that is a screenAction, when you click a button to activate component or is triggered via a connectedCallback, this alway appears.

How would you hide the white background?

I know you can do an slds-hide a a specific Div, but what would this count as?

Best Answer

Unfortunately, you can't do this in an approved manner. It's baked in to the modal's styles. You can use loadStyle to globally override CSS (e.g. the modal's background), but this may be blocked in a future update. Ideally, you should just accept that the background is a necessary limitation of the platform. Any workaround you may do for now will not likely last for long into the future.

Related Solutions

[SalesForce] Lightning modal without shaded backdrop behind

Here is the proper way to use modal in salesforce lightning component

in component

<lightning:button label="Open Modal" onclick="{!c.openModal}" />
<div role="dialog" tabindex="-1" aura:id="myModal" aria-labelledby="header43" class="slds-modal ">
    <div class="slds-modal__container">
        <div class="slds-modal__header">
            <h2 id="header43" class="slds-text-heading--medium">CONFIRM</h2>
        </div>
        <div class="slds-modal__content slds-p-around--medium">
            <center><h2>Are you sure you want to delete this?</h2></center>
        </div>
        <div class="slds-modal__footer">
            <lightning:button label="Cancel" onclick="{!c.closeModal}"/>
            <lightning:button variant="brand" label="Delete" />
        </div>
    </div>
</div>
<div class="slds-backdrop " aura:id="myModal-Back"></div>

In Controller

 openModal : function(component, event, helper) {
   //find modal using aura id
    var modal = component.find("myModal");
    var modalBackdrop = component.find("myModal-Back");

   // Now add and remove class
    $A.util.addClass(modal, 'slds-fade-in-open');
    $A.util.addClass(modalBackdrop, 'slds-fade-in-open');
}

closeModal : function(component, event, helper) {
   //find modal using aura id
    var modal = component.find("myModal");
    var modalBackdrop = component.find("myModal-Back");

   // Now add and remove class
    $A.util.removeClass(modal, 'slds-fade-in-open');
    $A.util.removeClass(modalBackdrop, 'slds-fade-in-open');
}

[SalesForce] Styling an LWC component with a lightning-tab to use the slds-has-success style

Lightning Web Components introduced Shadow Dom. Therefore by standard you are not able to additionally modify ready to use LWC components in different way than by using attributes of the component (imagine that it is something like API for the component).

You can overcome your struggles in two ways:

Use icon-name (like you already do) or end-icon-name. When content under your tab is accepted, change attribute under end-icon-name to utility:success using js.
Use component blueprints from LightningDesignSystem and write your tabs 'manually'. You will have all the posibilities that you can imagine :)