Modify my SPFx web part to read css file instead of writing the css code inside the web part

Question

I have built a web part which is similar to this web part from github @ https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-enhanced-list-formatting . The web part allow to embed custom css code inside modern pages. But is it possible to modify the web part, to referecne a css file instead of having to write the actual css code inside the web part? So instead of writing the css code as follow:-

to reference the css file as follow:-

I attached the code for the SPFx web part, as i am unable to add it inside my question.

any idea, how i can achieve this?

Thanks

149069-enhancedlistformattingwebpart.txt149070-enhancedlistformatting.txt149069-enhancedlistformattingwebpart.txt149070-enhancedlistformatting.txt

Answer 1

Hi @john john ,
I would recommend you react-add-js-css-ref. This web part provides an interface to JS and CSS file references so that we don't have to modify code when we need to change references or add new references in the future. As part of security measures, this actions on web part can be only accessed by users who have Manage web permission on site.
Here is the document:
https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-add-js-css-ref

---

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.

---