honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
sp-dev-fx-webparts/samples/react-css-in-js-typestyle
History
Hugo Bernier 82598c094f Added links to issue templates 2021-04-26 02:08:59 -04:00
..
assets Updated sample JSON 2021-03-15 03:48:14 -04:00
config New sample - CSS in JS with TypeStyle. 2020-04-24 00:07:25 +03:00
src New sample - CSS in JS with TypeStyle. 2020-04-24 00:07:25 +03:00
teams New sample - CSS in JS with TypeStyle. 2020-04-24 00:07:25 +03:00
.editorconfig New sample - CSS in JS with TypeStyle. 2020-04-24 00:07:25 +03:00
.gitignore New sample - CSS in JS with TypeStyle. 2020-04-24 00:07:25 +03:00
.yo-rc.json New sample - CSS in JS with TypeStyle. 2020-04-24 00:07:25 +03:00
README.md Added links to issue templates 2021-04-26 02:08:59 -04:00
gulpfile.js New sample - CSS in JS with TypeStyle. 2020-04-24 00:07:25 +03:00
package-lock.json New sample - CSS in JS with TypeStyle. 2020-04-24 00:07:25 +03:00
package.json New sample - CSS in JS with TypeStyle. 2020-04-24 00:07:25 +03:00
tsconfig.json New sample - CSS in JS with TypeStyle. 2020-04-24 00:07:25 +03:00
tslint.json New sample - CSS in JS with TypeStyle. 2020-04-24 00:07:25 +03:00

README.md

"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.

picture of the web part in action

Used SharePoint Framework Version

1.10.0

Applies to

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