react-scoped-style
scope react element by transform external style into inline styles
Development
npm install
npm start
Example
http://localhost:8000/examples/
online example: http://yiminghe.github.io/react-scoped-style/
docs
Feature
- support ie8,ie8+,chrome,firefox,safari
- does not support css priority (just apply rules by css order in source text)
- does not support css property inheritance (no shadow dom...)
- does not support :hover, :active ....
- does not support css media query
install
Usage
;;;var style = ; var html = <div> <p className="test">scope react element by transform external style into inline styles</p> <p> <a href="https://github.com/yiminghe/react-scoped-style">repo</a> </p> <ScopedStyle style=style> <div> <span>green zoom</span> <span style=color: 'blue'>blue zoom</span> <p> <span>black</span> <span> - </span> <a className='test'>red zoom</a> </p> <ScopedStyle> <a className='test'>black isolate</a> </ScopedStyle> <ScopedStyle scoped=false> <a className='test'>red zoom penetrate</a> </ScopedStyle> </div> </ScopedStyle></div>; ReactDOM;
API
props
name | type | default | description |
---|---|---|---|
scoped | Boolean | true | whether isolated from outside |
style | String|ParsedCssResult | style to be applied |
methods
-
ParsedCssResult createStyleSheet(css:String) parse css into object
-
ReactElement transformElement(root:ReactElement, css:String|ParsedCssResult)
Test Case
npm test
npm run chrome-test
Coverage
npm run coverage
open coverage/ dir
License
react-scoped-style is released under the MIT license.