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 7ed51a0838 Updated sample JSON 2021-03-15 03:48:14 -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 URL dev.office.com to docs.microsoft.com 2020-06-09 09:09:22 +02: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 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