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

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

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.