react-stylematic
A stylematic wrapper for React
Quick example
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/>);
});