Lightning Aura Components Developer Guide

Introducing Aura Components
Quick Start
Creating Components
Using Components
Communicating with Events
Communicating Across the DOM with Lightning Message Service
Creating Apps
Styling Apps
Using the Salesforce Lightning Design System in Apps
Using External CSS
More Readable Styling Markup with the join Expression
Tips for CSS in Components
CSS for RTL Languages
Vendor Prefixes
Styling with Design Tokens and Styling Hooks
Developing Secure Code
Using JavaScript
Working with Salesforce Data
Testing Components
Debugging
Performance
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Using External CSS

To reference an external CSS resource, upload it as a static resource and use a <ltng:require> tag in your .cmp or .app markup.

ltng:require enables you to load external CSS and JavaScript libraries for your component or app.

You can’t load JavaScript resources from a third-party site, even if it’s a CSP Trusted Site. To use a JavaScript library from a third-party site, add it to a static resource, and then add the static resource to your component. After the library is loaded from the static resource, you can use it as normal.

Important

Here’s an example of using ltng:require:

1<ltng:require styles="{!$Resource.resourceName}" />

resourceName is the Name of the static resource. In a managed package, the resource name must include the package namespace prefix, such as $Resource.yourNamespace__resourceName. For a stand-alone static resource, such as an individual graphic or script, you only need the name of the resource. For example, if you uploaded myScript.js and set the Name to myScript, reference it as $Resource.myScript. To reference an item within an archive static resource, add the rest of the path to the item using string concatenation.

Here are some considerations for loading styles:

Loading Sets of CSS
Specify a comma-separated list of resources in the styles attribute to load a set of CSS.

Due to a quirk in the way $Resource is parsed in expressions, use the join operator to include multiple $Resource references in a single attribute. For example, if you have more than one style sheet to include into a component the styles attribute should be something like the following.

1styles="{!join(',', 
2    $Resource.myStyles + '/stylesheetOne.css', 
3    $Resource.myStyles + '/moreStyles.css')}"

Note

Loading Order
The styles are loaded in the order that they are listed.
One-Time Loading
The styles load only once, even if they’re specified in multiple <ltng:require> tags in the same component or across different components.
Encapsulation
To ensure encapsulation and reusability, add the <ltng:require> tag to every .cmp or .app resource that uses the CSS resource.

ltng:require also has a scripts attribute to load a list of JavaScript libraries. The afterScriptsLoaded event enables you to call a controller action after the scripts are loaded. It's only triggered by loading of the scripts and is never triggered when the CSS in styles is loaded.

Styling Components for Lightning Experience or Salesforce for Android, iOS, and mobile web

To prevent styling conflicts in Lightning Experience or Salesforce for Android, iOS, and mobile web, prefix your external CSS with a unique namespace. For example, if you prefix your external CSS declarations with .myBootstrap, wrap your component markup with a <div> tag that specifies the myBootstrap class.
1<ltng:require styles="{!$Resource.bootstrap}"/>
2<div class="myBootstrap">
3    <c:myComponent />
4    <!-- Other component markup -->
5</div>

Prefixing your CSS with a unique namespace only applies to external CSS. If you’re using CSS within a component bundle, the .THIS keyword becomes .namespaceComponentName during runtime.

Note