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 the 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: React Script Editor Web Part

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 "" >> 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 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 little "+" icon and choose "Modern Script Editor web part" from the list of choices.
  
• Now, click on "Edit Snippet" button and place the CSS code in it. In my case, I've added the CSS to hide "Site Contents" link in the left navigation.
  
• Save and Publish the page.

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