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
This decorator supports all CSS capabilities defined here: https://www.npmjs.com/package/scope-css
just kidding! XD
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>
}
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
Thanks to @_developit for its support <3.
This development is related on this conversation Twitter Link and this issue GH preact issue