Safely using legacy Fabric Styles

If your SPFx solution is reliant on legacy Fabric core styles as documented here be aware of the following guidance. An example usage of Fabric core styles is as follows, <div className="ms-Grid-col ms-sm6 ms-md4 ms-lg2">.

For solutions using SPFx < 1.8.2, no action is required to use legacy Fabric core styles.

For solutions using SPFx >= 1.8.2, ensure that the webpart manifest demands legacy Fabric core styles be loaded onto the page. This is done by specifying loadLegacyFabricCss: true in the solution manifest.

Until recently, a host page bug was present where legacy Fabric core styles were loaded unscoped. Therefore, if another solution demanded the styles, then all other solutions on the page were able to use them. This led to solutions working "by chance" when not rendered in isolation.

To address this bug, the styles were scoped to .ms-SPLegacyFabricBlock class and applied to SPFx solutions that demand the Fabric core stylesheet be loaded. To provide a migration path for solutions reliant on the side-effect above, we are applying .ms-SPLegacyFabricBlock to all divs exposed to third-party solutions. During that time, modify the solution(s) impacted to declare the dependency on legacy Fabric core styles. We will eventually remove the explicit reference to .ms-SPLegacyFabricBlock from the DOM for solutions that do not declare their dependency after communicating that change broadly via existing channels.

In the event of a solution that is running in DOM elements that are not provided by the framework (generally unsupported), you will need to apply the .ms-SPLegacyFabricBlock class yourself.

If you are facing Fabric core related style regressions after following the above, open an issue at https://github.com/SharePoint/sp-dev-docs/issues/new.