Using a non-SLDS css library with LWC

Question

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?

Answer 1

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.