How to Add Custom CSS to SharePoint Online Modern Page?

Requirement: Add custom CSS to SharePoint Online modern page

SharePoint Online: How to Inject CSS to a Modern Page?

As the script editor web part is not supported in modern SharePoint, Power users often get stuck if they want to change the UI elements through CSS or JavaScript. Luckily, We have SPFx based react script editor web part to add custom CSS or JavaScript to modern SharePoint Online pages. Here are the steps at a high level:

1. Build the SPFx solution package
2. Upload and deploy the .sppkg file to the Tenant App catalog
3. Create an App Instance in the site where you want modern script editor web part
4. 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.

  

More info on How to Deploy an App to App Catalog in SharePoint Online?

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.

Please note, This injects CSS or JavaScript to a specified modern page where you add the web part. If you want to inject CSS at the site level, You have to create an SPFX application extension. Here is my another post on SharePoint Online: How to Inject Custom CSS in Modern Sites?