README.md
react-scoped-style
scope react element by transform external style into inline styles
Development
npm install
npm startExample
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
import ScopedStyle, { createStyleSheet } from 'react-scoped-style';
import React from 'react';
import ReactDOM from 'react-dom';
var style = createStyleSheet(`
.test {
color:red;
zoom:1.5;
}
div>span{
color:green;
zoom:1.5;
}
`);
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.render(html, document.getElementById('__react-content'));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-testCoverage
npm run coverageopen coverage/ dir
License
react-scoped-style is released under the MIT license.
