react插件包

react-scoped-style

• 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

不支持css优先级(仅在源文本中按css顺序应用规则)

不支持css属性继承(没有影子dom…)

不支持伪类标签

不支持css媒体查询

所以有点鸡肋

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)