Search code examples
reactjssharepointsharepoint-onlinespfxspfx-extension

Using Spfx React-Application-Injectcss extension (link in des) to hide left side navigation on one particular site


I've built and applied this extension react-application-injectcss(https://github.com/pnp/sp-dev-fx-extensions/tree/master/samples/react-application-injectcss) but it applies on all sites in my tenancy. Can I hardcode site name of a particular site where I need to apply custom css/js

Where do I change in code (.ts file)?


Solution

  • You could use this extension to inject the js file to the page and judge the url of the current page in the js file, and then inject the CSS file.

    if ((window.location.href.toLowerCase().indexOf('testfolder') > 0))
        {
        
            var head = document.getElementsByTagName('head')[0];
            var link = document.createElement('link');
            link.href = 'https://contoso.sharepoint.com/sites/dev/Doc/testFolder/test.css';
            link.rel = 'stylesheet';
            link.type = 'text/css';
            head.appendChild(link);
        }
    

    extension inject js file