Reshade

Installation

yarn add reshade npm i --save reshade

About

Reshade is a decorator that lets you write isolated styles in your React components.

Simply add the decorator, create a style method and you are good to go!

This project depends on shadow DOM and display: contents. You should not use this package unless your target browsers support these features

Browser support for display: contents

Browser support for shadow DOM v1

Currently this is a good fit for internal applications.

import React , { Component } from ' react ' import reshade from ' reshade ' @reshade class Example extends Component { state = { fontSize : ' 1.1rem ' , } style ( ) { return ` .container { font-size: ${ this . state . fontSize } ; } ` } setFontSize = e => { const fontSize = e . target . innerHTML this . setState ( { fontSize } ) } render ( ) { return ( < div className = " container " > Selected font size : { this . state . fontSize } < button onClick = { this . setFontSize } > 1rem </ button > < button onClick = { this . setFontSize } > 2rem </ button > </ div > ) } } export default Example

The shadow root is supplied as a prop.