1

We are building a Lightning Web Component using some of the native lightning components. However, we'd like to style it differently. Is it possible to import and apply a non-slds css library to LWC?

If not, what are some of the best practices to apply custom sytling to LWC components?

4

Yes, it is. You can do so by using an import with @salesforce/resource_url module. Take a look at this documentation. Basically it comes down to these few lines:

import { loadStyle } from 'lightning/platformResourceLoader';
import SOME_CSS_FROM_STATIC_RESOURCE from '@salesforce/resourceUrl/d3';

export default class ClassName extends LightningElement {
    connectedCallback() {
        loadStyle(this, SOME_CSS_FROM_STATIC_RESOURCE);
    }
}

If you have a .zip file instead of single CSS you can load it this way:

loadStyle(this, SOME_ZIP_FILE + '/folderName/cssFileName.css');

EDIT: See @Renji-xD comments' with more technical background and recommendations regarding CSS in LWC.

  • 1
    one should add the note though that salesforce does not recommend to do it (especially when they including javascript) - also off platform and later with real shadow dom enablement css frameworks will stop working when they are just added globally – Renji-xD Jun 27 '19 at 11:35
  • @Renji-xD I am not a front-end master at any way. Could you ellaborate on that or pass some links to explanation what and how exactly will that impact? – Bartosz Śliwiński Jun 27 '19 at 14:21
  • 1
    here salesforce.stackexchange.com/a/265967/54495 and here salesforce.stackexchange.com/questions/264412/…: For general explanation of shadow dom you can read the documenation here developer.salesforce.com/docs/component-library/documentation/… . With the "real" shadow dom global styles will not be applied to components by specification. Most likely sfdc will implement something to automate it but i think its still important to know whats happening (even in background potentially) – Renji-xD Jun 27 '19 at 15:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.