I have a static site, hosted in a AWS S3 bucket. The static site uses Lightning Out to load a component that contains a flow. I have included the SLDS stylesheet in the static site, and have confirmed it loads correctly. It looks like everything in the actual lightning component is styled correctly and the SLDS stylesheet is doing its job. However, when a flow is loaded in the component the content comes through unstyled.

Here is the static site:

        <script src="[MY_SANDBOX]/lightning/lightning.out.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jsforce/1.7.0/jsforce.min.js"></script>
        <button onclick="login()">Login</button>
            loginUrl : 'https://test.salesforce.com',
            clientId: '[    MY_CLIENT_ID    ]',
            redirectUri: '[ MY_REDIRECT ]'
        function login(){
        jsforce.browser.on('connect', function(conn) {
            if(conn.accessToken && jsforce.browser.isLoggedIn()){
                $Lightning.use("c:DEPENDENCY_APP", function() {
                    function(cmp) {
                        //nothing yet
        <div class="slds-scope">
            <div id="lightningout">

The component that holds the flow looks like this:

<div aura:id="newBidContainer" class="slds-scope">
    <lightning:flow title="" aura:id="newBidFlow" onstatuschange="{!c.handleNewBidStatusChange}" class="slds-scope" />

As you can see, I have tried to force slds-scope in every parent div that will hold the flow. I have also included it in the class="slds-scope" parameter on the lightning:flow directive.

This is what the flow looks like in salesforce:

enter image description here

And this is what it looks like in the static site:

enter image description here

  • Probably you should try directly adding the SLDS static resources to your page, like the downloaded file from here, lightningdesignsystem.com/assets/downloads/…
    – zuke
    Feb 23, 2018 at 22:12
  • @zuke I have included the SLDS stylesheet in the static site - that's exactly what I did. I have also verified that the SLDS stylesheet is loading correctly. Feb 26, 2018 at 14:00

1 Answer 1


Per the cloud flow guide, "Flows that run from a Visualforce component always use Classic runtime."


The best option is to grab the styles from App.css in context of the flow in lightning and apply them to your component either in the style component or via a static resource: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/apps_css_external_platform.htm

  • good catch. salesforce support (multiple tickets) never even caught that. Dec 6, 2018 at 21:02

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .