Lightning QuickAction background color change
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>");
}
..............
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>