sp-dev-fx-webparts/samples/react-css-in-js-typestyle

"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 web part to your tenant app store
• add the app to a SharePoint site and then add the web part 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