sp-dev-fx-webparts/samples/react-spupsproperty-sync

page_type	products	languages	extensions
sample	office-sp	javascript typescript	contentType technologies platforms createdDate samples SharePoint Framework react 04/24/2020 12:00:00 AM

"CSS in JS" with SharePoint Framework and TypeStyle

Summary

The web part demonstrates the usage of "CSS in JS" pattern with SharePoint Framework. "CSS in JS" is implemented using TypeStyle library. Read more in the blog post here.

Used SharePoint Framework Version

Applies to

• SharePoint Framework
• Office 365 tenant

Solution

Solution	Author(s)
react-css-in-js-typestyle	@Sergei Sergeev - Mastaq

Version history

Version	Date	Comments
1.0	April 24, 2020	Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

---

Minimal Path to Awesome

• Clone this repository
• in the command line run:
  • npm install
  • gulp build
  • gulp bundle --ship
  • gulp package-solution --ship
• add the webpart to your tenant app store
• add the app to a SharePoint site and then add the webpart to the page

Features

This Web Part illustrates the following concepts on top of the SharePoint Framework:

• "CSS in JS" pattern adopted to SharePoint Framework
• Theme support using SharePoint Framework's ThemeProvider
• Dynamically reacting to theme changes without affecting performance
• React hooks