2

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?

Improve this question

1 Answer 1

Reset to default
5

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.

Improve this answer
3
  • 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, 2019 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, 2019 at 14:21
  • 2
    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, 2019 at 15:50

You must log in to answer this question.

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