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 in the site where you want modern script editor web part
- Edit the page, Add modern script editor web part and place CSS.
Step 1: Build the 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
Add an instance of the App to your SharePoint Online site where you need 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.
Step 4: Edit the page, Add a modern script editor web part and place CSS
As a final step, You have to add the modern script editor web part to your SharePoint Online page.
- Browse to 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.