SPFx Applications Customiser CSS Injection

Summary

This sample shows how to inject a custom Cascading Style Sheet (CSS) on modern pages.

Note: This code is provided as a sample only. Keep in mind that Microsoft may change page elements and styles at any time, rendering your custom CSS useless. It is preferrable to use well-known HTML element placeholders.

When you need to make minor cosmetic changes to modern pages (e.g.: match your corporate branding guidelines) and cannot use placeholders,you can create a custom CSS and inject on every modern page.

In this example, we deploy the CSS in a shared location; this allows us to change the CSS file at any time without re-deploying or re-configuring the application customizer.

You can deploy the application customizer with different settings to point to different CSS files.

Please refrain from making drastic changes that may negatively impact your users' experience. If you experience issues with modern pages, please try disabling the extension before calling Microsoft Support to ensure that the issue isn't caused by your custom CSS.

Used SharePoint Framework Version

Applies to

• SharePoint Framework Extensions
• Office 365 developer tenant

Solution

Solution	Author(s)
react-application-injectcss	Hugo Bernier (Tahoe Ninjas, @bernierh)

Version history

Version	Date	Comments
1.0.0	07 May, 2018	Initial release
1.1.0	18 October, 2018	Updated to SPFx 1.6
1.2.0	28 March, 2018	Updated to SPFx 1.8
1.3.0	4 Sept, 2019	Updated to SPFx 1.9.1

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

---

Minimal Path to Awesome

Prepare the assets

1. create a custom CSS file that meets your needs. For example, this CSS will change the feedback button's background color to orange.

.sitePage-uservoice-button {
  background-color: orange;
 }

2. Upload the CSS file as custom.css to your Styles Library of the root site collection (i.e.: https://<yourtenant>.sharepoint.com/Style%20Library/Forms/AllItems.aspx).
3. Navigate to your site. Your custom CSS should be applied.

For example, the CSS provided above will make the feedback button appear as follows:

Build the solution

1. clone repo
2. Ryn npm install gulp bundle --ship gulp package-solution --ship

Manual deployment

1. Upload the react-application-injectcss.sppkg from the sharepoint folder to your App catalog.
2. When prompted to deploy to all sites, choose the option that suits your needs.

Changing the CSS location

To simplify deployment, the extension looks for a custom.css in your tenant's root Style Library. If you wish to use a different CSS name and location, use one of the following approaches:

In the solution

This approach will change the default css location in the solution so that it will automatically load your custom CSS when the extension is deployed.

Note that if you intend to deploy this extension tenant-wide, your custom CSS URL should be an absolute URL or a server-relative URL.

1. Locate the elements.xml file, in the sharepoint > assets folder
2. Change the ClientSideComponentProperties to point to your custom CSS URL.
3. Run gulp bundle --ship
4. Run gulp package-solution --ship
5. Upload the react-application-injectcss.sppkg from the sharepoint folder to your App catalog.
6. When prompted to deploy to all sites, choose the option that suits your needs.

Features

Sample SharePoint Framework Application Customiser which injects a custom CSS in the HTML header.

This sample illustrates the following concepts on top of the SharePoint Framework:

• HTML manipulation