3rd party SPFx which i can use to inject custom css files inside different modern pages by specifying the cusotm css url

Question

I am starting this non-standard project for a SharePoint Online tenant:-

1) The client has created 10 modern pages that will be defined as templates.

2) Inside each of the 10 modern pages we need to inject custom CSS to change the font/styles for each of the 10 modern pages.

The customer is aware that injecting custom CSS to override fonts and color might break if Microsoft update the HTML elements for those pages. and the customer if fine to live with this issue/risk.

My concern is if i can use any available SPFx which will allow me to inject custom css inside the 10 modern pages, by dynamically referencing the custom css url?. something as follow:-

Now i find this SPFx @ https://github.com/hugoabernier/react-application-injectcss .. but the issue with this SPFx web part, is that the url for the custom css is hard-coded inside the elements.xml file. while what I am trying to do, is to add the SPFx web part inside a page >> then inside the web part settings to define the custom css url.. so in this case i can dynamically define 10 different custom css files for the 10 modern pages using the same SPfx web part.

So is there a ready made web part to do this? If not, then can i can modify the web part @ https://github.com/hugoabernier/react-application-injectcss to allow us to dynamically define the custom css url for each page?

Thanks

Answer 1

Hi @john john ,

You may got it wrong. The SPFx @ https://github.com/hugoabernier/react-application-injectcss is not web part, it is spfx extensions which would work for all pages in the site.

For your requirement, it's better to use spfx react-script-editor webpart to inject css in your page: https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-script-editor

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

---

Answer 2

You can use the React Inject css extension. It is installed on the tenant level. Then just create different classes for each page. This way you can manage all of your styles from one stylesheet.

Also, I do not recommend using the react script editor web part to inject custom javascript. This leaves the door open for vulnerabilities. Instead, create and deploy a custom webpart which has your .js compiled in the solution.

Hope this helps.

Tony M