<aura:html tag="style"> not working after summer 19 release

Question

I applied the below code to increase the width of quickAction lightning component

<aura:html tag="style">
    .slds-modal__container { 
        width : 60% !important; max-width : 80% !important; 
    } 
</aura:html>

But after summer 19 it is not working and not getting applied. Any changes has occured in Summer19.

Answer 1

First, in Aura, we support styling using a component CSS file to ensure styles are scoped with .THIS and don't bleed and create problems with Salesforce and third-party components:

.THIS .slds-modal__container { 
  width : 60% !important; max-width : 80% !important; 
} 

Still, I have just checked with Summer '19 and this component named "styleTest" does generate a style tag as you would expect:

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >     
  <h1>Aura Style Test</h1>
  <aura:html tag="style">
    .slds-modal__container { 
      width : 60% !important; max-width : 80% !important; 
    } 
  </aura:html>          
</aura:component>

This is the output once I add it to a page:

<div data-component-id="styleTest" data-aura-rendered-by="348:0" class="flexipageComponent" data-aura-class="flexipageComponent">
  <h1 data-aura-rendered-by="352:0">Aura Style Test</h1>
  <style data-aura-rendered-by="354:0">
    .slds-modal__container { 
      width : 60% !important; max-width : 80% !important; 
    } 
  </style>
</div>

Therefore the change is really at the CSS level, or with the quickAction components.

Overriding global SLDS using your trick is clever, but it will depend on load order, changes in SLDS, or changes in the quickAction components (a conversion from Aura to LWC for example might/will happen).

Like any remedial CSS, the best I can suggest is:

• Short term: keep-up with the changes of each new release. Overriding SLDS of base components is not recommended, but you business needs might dictate so, and make it worth the investment.

• Mid/long term: Contact Salesforce to see if your issue can be solved/supported by the platform. I doubt you're the only person with that specific need and there might already be an elegant way to solve this problem.

I will contact other key players and post additional comments as answers comes up.

Answer 2

Personally, I use this method to override the standard enhanced related list (the font size is just way to big on it in general, and generally defeats the purpose of having more then 4 columns) I realize it's not supported and far from best practice but I don't see another way to do it without building my own enhanced related list component which would be madness. Worst case. SFDC changes class names.. drops the hammer and it falls back to bigger font sizes..

    <aura:html tag="style">
        <!--
        The desired effect here is to override the Standard LDS Enhanced Related list as its font size is way to big.
        (Inventory Request Line Items) This really isn't best practice at all and is not supported but is a
        necessary evil.
        -->
    .forceRelatedListPreviewAdvancedGrid .uiVirtualDataTable { font-size: .80rem; }
</aura:html>

Answer 3

From my knowledge in-component styles for aura are disabled when Locker Service is enabled, so it stopped working when Locker Service was enabled

Answer 4

This is not how you use aura:html, mainly this need to be used when you want to bind some styling dynamically for example in your component file you bind an attribute this way :

<aura:attribute name="backgroundColor" type="String" default="XXXXXXXX"/>
<aura:html tag="style">
  :root{
     --backgroundColor : {!v.backgroundColor}
   }
</aura:html>
<div class="custom-body">
   lorem ipsum...
</div>

then in the css file you use it this way :

.THIS .custom-body{
     background : var(--backgroundColor);
}

there are other ways to use it as well, but this is the best utility i have seen. and it works still now.