style-it（纯文本css）

npm：https://www.npmjs.com/package/style-it
github：https://github.com/buildbreakdo/style-it

函数语法

（1）使用

import React from 'react';
import Style from 'style-it';
class Intro extends React.Component {
  render() {
    return Style.it(`
      .intro {
        font-size: 40px;
      }
    `,
      <p className="intro">CSS-in-JS made simple -- just Style It.</p>
    );
  }
}
export default Intro;

（2）输出

<p class="intro _scoped-1">
  <style type="text/css">
    ._scoped-1.intro {
      font-size: 40px;
    }
  </style>
  CSS-in-JS made simple -- just Style It.
</p>

JSX 语法

（1）使用

import React from 'react';
import Style from 'style-it';
class Intro extends React.Component {
  render() {
    return (
      <Style>
        {`
          .intro {
            font-size: 40px;
          }
        `}
        <p className="intro">CSS-in-JS made simple -- just Style It.</p>
      </Style>
    );
  }
}
export default Intro;

（2）输出

<p class="intro _scoped-1">
  <style type="text/css">
    ._scoped-1.intro {
      font-size: 40px;
    }
  </style>
  CSS-in-JS made simple -- just Style It.
</p>

使用实例

（1）配合canvas生成自定义水印背景