TEMP

Using Office UI Fabric Core and Fabric React in SharePoint Framework

Office UI Fabric is the official front-end framework for building experiences in Office 365 and SharePoint. SharePoint Framework provides a seamless integration with Fabric that enables Microsoft to deliver robust and consistent design language across various SharePoint experiences such as modern team sites, modern pages etc.,. As a result, Fabric is also available for developers in SharePoint Framework to build SharePoint solutions. With the help of Fabric Core, a set of core styles, and Fabric React, a set of Robust, up-to-date components, developers can build SharePoint solutions that fit seamlessly into SharePoint.

One of the goals of SharePoint Framework is to allow both Microsoft and customers to build rich applications on top of SharePoint. In that spirit, we wanted to ensure that SharePoint Framework allows:

• Microsoft to roll out specific and updated version of Fabric Core and Fabric React in SharePoint without conflicting customers' solution.
• Customers to choose and bundle their desired version of Fabric and Fabric React for their solutions.
• Customers to customize the styles, designs and components to use in their solution.

Based on the goals above, SharePoint Framework team has been closely working with the Fabric team to ensure we provide such a model in the framework.

When deploying new and updated experiences, Microsoft uses a version of Fabric and Fabric React in SharePoint. Depending on the requirements, Microsoft will likely use the latest or an updated version of Fabric Core and Fabric React in SharePoint pages. This will potentially conflict with your deployed solution as it could break existing styles or components that are using Fabric Core and Fabric React in your solution . For example, the Submit button in your web part is now using a dark red background color scheme instead of the intended blue background color scheme due to a Fabric Core update pushed in SharePoint by Microsoft that uses an updated color scheme for buttons.

Part of the reason conflicts occur between your deployed solution and Microsoft experiences is due to global styles. Changes to global styles, as it name implies, applies to all components in a page, including your solutions deployed on that page. The conflicts could be as small as a change in the color scheme to as big as the component failing to render resulting in a critical loss of functionality.