How to inject css / java script in Modern page in one of the Sub site SharePoint online?

[VISKR05]

Hi All, 

I have a Sub site where I have created a Modern page and added a list view web part in it. Now I want to do some customization like styling and add an button using HTML top of the list view web part. I was able to do using Script editor or Content Editor in Classic. As Content / Script editor is not supporting in modern page then how we can add css/html/javascript in modern page?

[#2]

Hi @VISKR05;

the recommended way to apply css and javascript customizations to a modern site would be SharePoint Framework (spfx)
https://learn.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview
https://www.youtube.com/watch?v=6WTtjXP5yW4

You can create custom webparts with that or create an application customizer that registers itself on every page of your site. You can even register custom commands to a list with a custom listview commandset
https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-...


But if you just want to style a list then you could use SharePoint json List formatting. You just create a JSON file that specifies how a column or row should be rendered and apply that
https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting
What you can do with that is quite impressive
https://pnp.github.io/List-Formatting/viewsamples/


Or you install the modern script editor webpart (itself an spfx solution)
https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-script-editor
But keep in mind that this is the cloud.... The HTML structure of the modern ui itself might change every day.

The last way might be the fastest way to fix your problem, but the first and second way conform more to the modern ui development standard.

Best Regards,
Sven

[#3]

@VISKR05 Check  my answer given here for injecting custom CSS/JavaScript on SharePoint online modern pages: How can I include the same JS and CSS files on multiple SharePoint Modern Page? 

If you want to customize only one modern page, you can also use modern script editor web part. Check my answer at: Hide Page Title and Command bar from Modern UI SharePoint pages 

---

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

For SharePoint/Power Platform blogs, visit: Ganesh Sanap Blogs