A SharePoint Framework (SPFx) solution may contain multiple web parts. In real-world scenarios, it does include numerous web parts and extensions. In most cases, we need to apply a common look and feel to all of these components.

In this article, we will explore how to share a CSS between multiple SPFx components (e.g. web parts and extensions).

SharePoint-2013-HostingWhy common CSS?

As we develop the SPFx web part (I am taking an example of the React-based web part), we keep adding multiple React components to it each handling a specific business component. Each component has got its own SCSS to apply styling to the component.

As we place SPFx components on the SharePoint page, they should have a common look and feel. E.g., a boxed border for all web parts, a web part heading, and text with a certain font, size, and color, etc. To render these common requirements, we should have a common CSS that can be shared by all React components and other web parts (and their React components) as well.

Development Approach

I have seen a common practice by various developers to write a common CSS (for e.g. common.css file) and upload it to Style library of SharePoint site.

This common.css file is then injected on each SharePoint site using SPFx extension application customizer using SPComponentLoader.loadCss something like below:

The SPFx web part component can then assume the existence of above pre-loaded CSS and use the css classes as below:

I will not argue here if it is the correct approach and I will leave it up to individuals by respecting their approach.

Shared CSS approach

We can have a folder named Shared and a file as shared.module.scss

 

Update the web part css to use the Shared css. (For e.g., src\webparts\commonCssDemo\components\CommonCssDemo.module.scss)

Update the web part’s render method to use the shared css class.

This shared CSS can be used by all components in the SPFx solution.

 

Benefits of Shared CSS

Below are the benefits of using shared CSS:

  • All CSS can be controlled at a centralized location
  • Lesser maintenance
  • Individual web part/component does not need a CSS update