This decorator allows to easily style React components through adding a scoped stylesheet inside that component and defined styles only get applied to it and its descendants.

Basically it allows to style in Reactjs like Angular or Vue does by adding a scoped stylesheet

Capabilities

This decorator supports all CSS capabilities defined here: https://www.npmjs.com/package/scope-css

Getting started

Bower

just kidding! XD

NPM

install npm install react-stylesheet-decorator --save

usage:

first import

import { stylesheet } from " react-stylesheet-decorator "

then define a string with raw CSS content

const style = ` span { font-size: 20px } `

Plug it on render fn of some React component

@ stylesheet ( style ) render ( ) { return < span > something < / span > }

Using Preact

This package is based on Preact package which has the same API but you have to use another package. Please refer to here if you're using Preact https://www.npmjs.com/package/stylesheet-decorator

That's all Folks!

Thanks to @_developit for its support <3.

This development is related on this conversation Twitter Link and this issue GH preact issue