SharePoint Online: How to Inject Custom CSS in Modern Sites?

Requirement: Add custom CSS to modern SharePoint Online sites.

How to Inject Custom CSS to Modern Sites in SharePoint Online?

The Alternate CSS and script editor web parts are not supported in the Modern SharePoint Online sites. However, if you want to inject a custom CSS to your SharePoint Online sites, you can use the React application customizer to inject CSS. Here are the steps at a high level:

  1. Create a CSS file with your customizations and upload it to “Style library”
  2. Download or build the SPFx solution package from https://github.com/hugoabernier/react-application-injectcss
  3. Upload and deploy the .sppkg file to tenant App catalog
  4. Activate the SPFx Application customizer to the site through custom action

Step 1: Create a Custom CSS file and Upload to “Style Library”

In my case, we wanted to hide the “Export to Excel” button in all lists and libraries of a SharePoint Online site and used this CSS in my custom.css file and uploaded it to the “Style Library” folder of the site:

button[name="Export to Excel"] {
  display: none;
}

Step 2: Download the SharePoint Framework Solution Package

Go to https://github.com/hugoabernier/react-application-injectcss/tree/master/assets and download the “react-application-injectcss.sppkg” file to your computer. You can also download the source code and build a new solution with your customizations.

Step 3: 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 to make it available on any site of your tenant.

  • Navigate to your App catalog site. E.g. https://<tenant>.sharepoint.com/sites/apps/
  • Click on “Apps for SharePoint” >>  Click on “Upload” >> Browse and select the “react-application-injectcss.sppkg” file you downloaded >> Deploy.

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

Step 4: Activate the SPFx Application Customizer to the Site through Custom Action

The next step is to deploy the application customizer to the site or tenant using custom action. Here is the PowerShell to deploy the application customizer:

#Parameters
$SiteUrl = "https://crescent.sharepoint.com/Sites/Marketing"
$customCSSUrl = "https://crescent.sharepoint.com/sites/Marketing/Style%20Library/custom.css"

#Connect to Site
Connect-PnPOnline $SiteUrl -Credentials (Get-Credential)

#Add Custom Action
Add-PnPCustomAction -Title "Inject CSS Application Extension" -Name "InjectCssApplicationCustomizer" -Location "ClientSideExtension.ApplicationCustomizer" `
                    -ClientSideComponentId "5a1fcffd-dfeb-4844-b478-1feb4325a5a7" -ClientSideComponentProperties "{""cssurl"":""$customCSSUrl""}"

If you want to remove the application customizer, you can do by:

#Parameters
$SiteUrl = "https://crescent.sharepoint.com/Sites/Marketing"

#Connect to Site
Connect-PnPOnline $SiteUrl -Credentials (Get-Credential)

#Remove the Custom Action
Get-PnPCustomAction | Where { $_.Name -eq "InjectCssApplicationCustomizer"} | Remove-PnPCustomAction -Force

That’s all. Your custom CSS should be in action! The “Export to Excel” button is hidden through our custom CSS:

sharepoint online inject custom CSS in modern sites

Salaudeen Rajack

Salaudeen Rajack - SharePoint Expert with Two decades of SharePoint Experience. Love to Share my knowledge and experience with the SharePoint community, through real-time articles!

9 thoughts on “SharePoint Online: How to Inject Custom CSS in Modern Sites?

  • Do we need to get the our own unique ID after checking using Get-PNPApp?
    In our case the ID =

    95059cc8-b63c-400b-ab8e-649335e44bff react-application-injectcss-client-side-solution True 1.2.0.0

    In your example it is “-ClientSideComponentId “5a1fcffd-dfeb-4844-b478-1feb4325a5a7”

    Reply
  • Hi,
    Thanks for the solution. Is there a way to change the header size and the logo size on the modern page?

    Reply
    • I am using Sharepoint OnPrem 2019, so customizing header and footer is not an option OTB

      Reply
  • Hi Is it possible to hide the option on the click of gear icon like site content ,site usage and site permissions.

    Reply
  • How can we upgrade it?

    Reply
    • Do you mean Update the CSS? Just edit and save the CSS where it’s saved. If you want to update the SPFx solution, remove it from the App Catalog, Re-Add to the Tenant App catalog and then to the site.

      Reply
  • This works for Document Libraries but not Lists, is it possible to modify the .css file to also exclude the ‘Export to CSV’ that remains with Lists?

    Reply
    • Well, You have to pick the button with the appropriate selector. E.g. On modern lists, the “Export to Excel” button can be selected with:

      button[name=”Export”] {
      display: none;
      }

      Reply
  • Is there a way i can change font size in SharePoint document library tittle on top?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *