1

I'm working on a customer service system using Salesforce Lightning and the Lightning Web Component (LWC) framework. What's the best way (if any) to include a global stylesheet to create/override styles on the site? Something that will enable control beyond the basic theming, which allows you to change a couple colors and logo, basically.

The closest I've gotten is:

  1. Upload my custom stylesheet through the Setup > Static Resources section
  2. Create a new special lightning web component that is visually hidden (via display:none for example) and used only to load my custom stylesheet static resource through it's javascript file - doing a connectedCallback() { Promise.all([loadStyle(this,lwcStyleResource)... kind of thing.

This seems to work well, with one caveat -- I have to include this component on any page that I want the styles to apply. I want this to be global and thus apply on every page. So is there a way to somehow include this special component on every page without having to manually add it to every page? I'm pretty much a noob to the Lightning system, so I don't know how everything is structured, if there's a main page template I could modify, or what.

2
  • Are you asking about Lightning Experience (inside Salesforce), Communities, or an external web site using LWC OSS (lwc.dev)?
    – sfdcfox
    Oct 29, 2020 at 15:25
  • @sfdcfox - I believe this is the Lightning Experience.
    – jbyrd
    Oct 30, 2020 at 20:38

1 Answer 1

2

If you want to apply a common stylesheet to all lightning web components, then the recommended approach is to create a common CSS module [as documented in detail here] and import it into the lightning web components. This would automatically apply the custom styling into the components where the CSS module is imported.

Note that lightning web components are self contained modules and consists of a single associated CSS file (which neither leaks into child components nor outside the component itself).


If you want to apply a common custom stylesheet to a community site, consider using an out-of-the-box lightning template and override it with custom CSS as detailed here.

If you want to override the standard Salesforce site look & feel, I would suggest you to reconsider it for the reasons mentioned here. Although, this post is a bit old, I feel that the points made by @KevinP are still valid to a large extent.

You must log in to answer this question.

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