legacy-fabric-styles-scaled.jpg

Using Legacy Fabric Style in New Microsoft SPFx Updates

Introduction

You might have realized some styling changes/issues with your webpart if it used a Legacy Fabric Style.

A client encountered a major issue with a custom SPFx webpart. The main function of this webpart is to display news from sitepages with “promotedstate” equals 2 (PromotedState=2 will filter out all News articles). This webpart has the capability of displaying up to 20 different news items in a carousel.

In this scenario, the styling issue was not a trivial one. The side-by-side styling for the carousel changed to a list. The side-by-side styling for the carousel changed to a list because it lost most of its fabric style classes. Mainly, “ms-Grid-row ms-Grid-col ms-sm12 ms-md12 ms-lg12 ms-xl6”.

Inspecting Elements to Find the Issue

Luckily for me, my developer environment had not updated/changed yet. I was able to pinpoint the issue via inspect element by comparing both. In the image below, the inspect element on the left is my developer tenant which was working correctly; the right is the client’s with the styling issue. In this screenshot you see that the client is clearly missing some .ms-SPLegacyFabricBlockclasses. This is what prompted me to research Legacy Fabric Styles.

The Solution

I came across an article Microsoft published about this update in November 2019 which basically explains that SPFx solutions >= 1.8.2 require “loadLegacyFabricCss: true” in the solution manifest of your webpart. This switch ensures that legacy Fabric core styles are loaded by the webpart.

I pasted the Legacy Fabric switch right after the “compenentType”, then after the “manifestVersion” – neither worked for me, so please make sure you paste it at that level in your manifest file (after supportedHosts). Don’t forget to redeploy your webpart!

Conclusion

You don’t have to re-design your entire webpart/app to support new Micorsoft Fabric UI standards; activating this feature in your manifest file of your react project should get you back on track.


Want to learn more about SharePoint customizations? I have another article on Adding Menu Tiles and Promoted Links to a SharePoint Site.

Perry KankamUsing Legacy Fabric Style in New Microsoft SPFx Updates

Join the conversation

This site uses Akismet to reduce spam. Learn how your comment data is processed.