Perry Kankam is a Software Engineer for ThreeWill. Perry started out programming in C# and XML. Over the years, he has continuously added a variety of skills to his skillset including recent mobile application development technologies like Angular, React and Ionic.
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.
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!
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.