@@include('../../templates/modules/components/DocumentationPageHeader.html')
For scenarios where multiple major versions may live in the same DOM, Fabric provides a "scoped" version of all Core styles that will only apply those styles when used under a versioned wrapper class.
To use scoped Fabric styles, simply add the versioned wrapper class to the parent DOM element you wish to scope, then use Fabric as usual.
For example, take this following title, which uses unscoped Fabric:
<div class="ms-font-xxl ms-fontColor-themePrimary">This title uses ms-fontColor-themePrimary from unscoped Fabric.</div>
To scope this title to v5.1.0, add an extra wrapper div
around it and add both the ms-Fabric
wrapper class and the scoping class for the current version of Fabric. Note that to illustrate this behavior for this demonstration, .ms-fontColor-themePrimary
has been overridden with a different color when used under the ms-Fabric--v5-1-0
version-scoping class.
<div class="ms-Fabric ms-Fabric--v5-1-0">
<div class="ms-font-xxl ms-fontColor-themePrimary">This title uses ms-fontColor-themePrimary from Fabric 5.1.0.</div>
</div>