2

I have imported a CSS library from a static resource file in my LWC using loadstyle as below.

LWC.js

import {LightningElement, api} from 'lwc';
import modal from '@salesforce/resourceUrl/modal';
import {loadStyle} from 'lightning/platformResourceLoader';


 connectedCallback() {

    Promise.all([
            loadStyle(this, modal + '/modal.css') //specified filename
        ])
        .then(() => {
            console.log('Loaded style');
        }).catch(error => {
            console.log('errror' + error);
            
        });

     }

The 'modal' file imported changes the standard Modal pop up CSS properties. However after closing this LWC, I expect the CSS properties also being removed. However this doesn't happen. The same CSS properties get applied to other Modal pop ups in the page. How can I unload this style without refreshing the page?

3 Answers 3

2

Well, I have faced the same issue and there is a working way to handle this.

  1. Add a JavaScript file to your Static Resource or create a new one if yours isn't of the application/zip type.
  2. Load the JavaScript file from the Static Resource when you need to remove the stylesheet.

When you add a stylesheet from a Static Resource it adds a stylesheet to the whole html page. It's added to the head of the page and looks like this:

<link href="/resource/RESOURCE_ID/modal/modal.css" charset="utf-8" type="text/css" rel="stylesheet">

Therefore, you can access it and manipulate as you want using JavaScript.

Below is the example of how it works

Imagine a scenario where you need to remove the custom styling from the Static Resource on the press of a button.

LWC HTML

<template>
    <button onclick={removeStylesheet}></button>
</template>

LWC JavaScript

import {LightningElement, api} from 'lwc';
import modal from '@salesforce/resourceUrl/modal';
import {loadStyle} from 'lightning/platformResourceLoader';

...

removeStylesheet() {
    Promise.all([loadScript(this, modal + "/removeStylesheet.js")]);
}

...

Static Resource JavaScript file

const STYLESHEET_NAME = "modal";
function removeStylesheet() {
    const cssLinks = document.querySelectorAll("link");
    if (cssLinks) {
        cssLinks.forEach((link) => {
            const href = link.href;
            if (href && href.includes(STYLESHEET_NAME)) {
                link.remove();
            }
        });
    }
}

removeStylesheet();
0

As you are overriding the standard slds classes for Modal, it will affect all Modals. Instead of using loadStyle for styling the Modal use Styling Hooks. With Styling Hooks you can apply different styles to different Modals.

enter image description here

1
  • Thanks.. but the properties I want to change is not in the list of styling hooks.. It has to be via 3rd party CSS library..
    – Brav
    Jan 31, 2023 at 13:08
0

You can't remove a CSS once imported. You'll need to specify a more specific selector (e.g. ".my-modal.slds-whatever-class").

You must log in to answer this question.

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