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)

猜你喜欢

转载自www.cnblogs.com/l8l8/p/9510273.html