Lightning QuickAction background color change

Question

On Case object, i have a quick Action "Assign Case" which looks as follows

markup looks like this

<aura:component implements="force:lightningQuickAction,force:hasRecordId" controller="AssignCaseController">
    <aura:attribute name="record" type="Object"/>
    <aura:attribute name="caseRecord" type="Object"/>
    <aura:attribute name="recordError" type="String"/>
    <aura:attribute name="isSpinnerVisible" type="Boolean" default="false" access="private" />

    <force:recordData recordId="{!v.recordId}" layoutType="FULL" targetRecord="{!v.record}" targetFields="{!v.caseRecord}" targetError="{!v.LDSErrors}"/>
    
    <div>
        <aura:if isTrue="{!v.isSpinnerVisible}" >
            <div class="slds-modal slds-fade-in-open">
                <lightning:spinner variant="brand" alternativeText="Loading"/>
            </div>
        </aura:if>
        
        <div class="slds-grid slds-wrap">
            <div class="slds-col slds-size_8-of-12 slds-form-element slds-text-align_center"> {!$Label.c.PF_AssignCase_DisplayMsg}</div>
            <div class="slds-col slds-size_4-of-12 slds-form-element slds-text-align_right">
                <button onclick="{!c.runAssignmentRules}" class="slds-button slds-button_brand">Submit</button>
            </div>
        </div>
    </div>
</aura:component>

From the picture, you can see that background is slightly colored, and i want background to be totally white (the way it is for standard quick Actions).

I cant seem to achieve that.

For the div where we have

<div class="slds-grid slds-wrap">

I added a class

<div class="slds-grid slds-wrap whitebackground">

In CSS for component, the class whitebackground has background color of "white"

This only covers a portion of the component, as shown below-

Seems like one.app creates a wrapper around the component, which continues to stay grey and i cant seem to make it all white. Any suggestions?

Answer 1

NOTE This is a hack and completely experimental, it may break between releases due to CSS class changes and works as of Spring 18.

The background color is coming from a app.css class .cuf-scroller-outside. If you override this class you can change the background color. Basically, you have to add this following CSS inside the HTML markup.

<style>
    .cuf-scroller-outside {
        background: rgb(255, 255, 255) !important; 
    }
</style>

But Style tag is not allowed directly in lightning components from ver42. Still you can manage to add the style in following way by using <aura:unescapedHtml.

In your component declare the a attribute called cssStyle and set this up in the init method of the Controller.

Component

.............
.............
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
.............
<aura:attribute name="cssStyle" type="String"/>
<aura:unescapedHtml value="{!v.cssStyle}"/>
<force:recordData recordId="{!v.recordId}"........../>
..............
..............

Controller

..............
doInit : function(component, event, helper) {
    component.set("v.cssStyle", "<style>.cuf-scroller-outside {background: rgb(255, 255, 255) !important;}</style>");
}
..............

Answer 2

You can also use the aura:html tag to achieve this. Works for API version > 42:

<aura:html tag="style">
    .cuf-scroller-outside {
        background-color: white;
    }
</aura:html>

Answer 3

Use <div class="slds-box slds-theme_default">