Home

Awesome

react-stylematic

build status dependencies status npm version

A stylematic wrapper for React

Quick example


/** @jsx createElement */

const createElement = require('react-stylematic'); 

const App = () => (
  <div style={{
    color: 'red',
    background: 'linear-gradient(#fff, #eee)',
    ':hover': {
      color: ['rgba(0,75,255,0.8)', 'blue']
    }
  }}>
    Hello World!
  </div>
);

Rendered HTML

<div class="_style_4e1hWd" style="color: red">Hello World!</div>

Automatically injected CSS into document <head>

<style data-styletron>
._style_4e1hWd {
  background: -webkit-linear-gradient(#fff, #eee) !important;
  background: -moz-linear-gradient(#fff, #eee) !important;
  background: linear-gradient(#fff, #eee) !important
}
._style_4e1hWd:hover {
  color: blue !important;
  color: rgba(0,75,255,0.8) !important
}
</style>

Extraction of CSS on server

const React = require('react');
const ReactDOM = require('react-dom/server');
const {renderStatic} = require('styletron-server');

const App = require('./app');

const {html, css, hydrationSrc} = renderStatic(() => {
  return ReactDOM.renderToString(<App/>);
});