Requirement: Add custom CSS to SharePoint Online modern page.
SharePoint Online: How to Inject CSS to a Modern Page?
- Build the SPFx solution package.
- Upload and deploy the .sppkg file to the Tenant App catalog.
- Create an App Instance on the site where you want a modern script editor web part.
- Edit the page, add the modern script editor web part and place CSS.
Step 1: Build the modern script editor web part – SPFx Solution Package
Build the SPFx solution package from https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-script-editor. The documentation is good enough. Or you can download the solution file directly from here:
Step 2: Upload and Deploy the .sppkg file to your App catalog Site
Once you have the SPFx package ready, you can deploy it to your app catalog site to make it available on any site of your tenant.
- Navigate to your App catalog site. E.g., https://crescent.sharepoint.com/sites/apps/
- Click on “Apps for SharePoint” >> Click on “Upload” >> Browse and select the “pzl-script-editor.sppkg” file you downloaded >> Deploy the package.
Step 3: Create an App Instance in the SharePoint Online Site
How to add a script editor web part to SharePoint Online modern page? Well, add an App instance to your SharePoint Online site first, where you need the modern script editor web part.
- Browse to your SharePoint Online site >> Click on Setting Gear >> Add an App.
- Click on “Modern Script Editor Web Part by Puzzlepart”.
This deploys the modern script editor web part to your SharePoint Online site.
As a final step, You have to add the modern script editor web part to your SharePoint Online page.
- Browse your modern SharePoint Online page >> Click on “Edit” in the top-right corner.
- Mouse over to the area where you would like to add the web part >> Click on the title “+” icon and choose “Modern Script Editor web part” from the list of choices.
- Now, click on the “Edit Snippet” button and place the CSS code in it. In my case, I’ve added the CSS to hide the “Site Contents” link in the left navigation.
- Save and Publish the page.
Embed Another Page or Site using iFrame
Here is an example of how to display another web page or web site inside a modern script editor web part:
In classic sites, You can upload the HTML file to a library and embed it to the page using the content editor or script editor web parts. For a modern site, use the Embed web part to add HTML code to a SharePoint Online modern page. More here: How to Embed HTML in SharePoint Online?