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

Question

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)?

Answer 1

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

Answer 2

I would say that ideologically, injecting CSS to customize things you don't own is a bit hacky and potentially harmful way. To customize site appearance, you can use the site template. For example, to "get rid of the sidebar" you could create "communication" site (that does not have the sidebar) instead of "team" site (that does). As simple as that.