Sharepoint - Sharepoint 365 - Add Custom CSS to Modern Pages

Probably not the answer you're looking for, but in the interest of letting you know that you're not crazy and possibly saving you some cycles: modern pages don't inherit from a master page that we have access to edit, nor do they use the alternate CSS setting. Basically everything you've come to understand about SP Online client-side development, SharePoint-hosted add-ins, etc ... throw a good chunk of it out when considering modern pages.

You can still land CSS into modern pages manually, possibly could script it out or create a modern web part with the content in it, but this would not work for list views or other built-in modern pages. As far as I know, nothing can be applied globally in modern mode, such as site-level user custom actions.

Check out Customizing "modern" site pages. You'll see the master page & alt css in the "not supported" list.

Supposedly more customization options are forthcoming. I haven't seen a date for any of that, though.

If any of you community-types out there know differently, please chime in.

You could investigate writing a SharePoint Framework Application Customizer:

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions

Amongst other things, this will let you load custom CSS and JavaScript on modern pages.

Although this method is NOT supported by Microsoft, as Joel mentioned, you can build an SPFx Extension (application customizer). Not supported because Microsoft can change the DOM and/or class name, which could break your CSS overrides. That being said it does work, but you'll want to communicate that to your client or IT management.

I recently used the Top Placeholder to drop CSS onto all modern pages. To get started, as Joel mentioned, go to Using Page Placeholders with Extensions.

In my code I was simply overriding styles, and fortunately I did not have to use any !important enforcement.

Add the .scss file to your project:

The CSS:

In your scss file, make sure everything is within :global{}, like this:

:global{
  .styleToOverride{
    background-color: f2f2f2;

  .anotherstyleToOverride{
    background-color: f9f9f9;
}

The ApplicationCustomizer.ts file:

Once you have your Top placeholder in place and working, you'll want to pull in your CSS into the placeholder. It should look something like this:

private _renderTopPlaceHolder(): void {

  if (!this._topPlaceholder) {
    this._topPlaceholder =
      this.context.placeholderProvider.tryCreateContent(
        PlaceholderName.Top,
        { onDispose: this._onDispose });

  if (this._topPlaceholder.domElement) {
    require("./css/customStyles.scss");
    this._topPlaceholder.domElement.innerHTML = "<div></div>";
  }
}

You should be able to test this by running:

gulp serve --nobrowser

Now, visit a modern page, and don't forget to add the query string to the end:

?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"e5625e23-5c5a-4007-a335-e6c2c3afa485":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{"testMessage":"Hello as property!"}}}

Also, don't forget to update the GUID in that query string to your solution id found in the package-solution.json file in your project. The bottom of Build a Hello World Extension shows you how to do this.