react-stylesheet-decorator

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.