How to use styletron-client - 7 common examples

import { INSTANCE_KEY, ELEMENT_CLASS_NAME } from './constants';
import StyletronClient from 'styletron-client';

const topLevel = typeof window !== 'undefined' ? window : {};

let instance = topLevel[INSTANCE_KEY];

if (!instance) {
  const existingStyles = document.getElementsByClassName(ELEMENT_CLASS_NAME);
  const styles = existingStyles.length > 0
    ? existingStyles
    : [createStyleElement()];
  const styletron = new StyletronClient(styles);
  instance = topLevel[INSTANCE_KEY] = styletron;
}

export default instance;

function createStyleElement() {
  const styleElement = document.createElement('style');
  styleElement.className = ELEMENT_CLASS_NAME;
  document.head.appendChild(styleElement);
  return styleElement;
}

getSync() {
        const styletron = new Styletron();

        return styletron;
    }
}

import React from 'react'
import { render } from 'react-dom'
import Styletron from 'styletron-client'
import { StyletronProvider } from 'styletron-react'

import LikeButton from './LikeButton'

import '../styles/style.scss'

const styleSheet = document.createElement('style')
document.head.appendChild(styleSheet)
const styletron = new Styletron([styleSheet])

render(
  
, document.getElementById('output'))

import React, { Component } from 'react'
import Styletron from 'styletron-client'
import { StyletronProvider } from 'styletron-react'
import pkg from './package.json'
import { Button } from './Button'

const styleSheet = document.createElement('style')
document.head.appendChild(styleSheet)
const styletron = new Styletron([ styleSheet ])

export default class App extends Component {
  render () {
    return (
      
        <main>
          <p>{pkg.description}</p>
          <button>Button</button>
        </main>
      
    )
  }
}

table.map((row, i) =>
        
          {
            row.map((x, j) =>
              {toPercent(x)}
            )
          }
        
      )
    }
  

const styleSheet = document.createElement('style');
document.head.appendChild(styleSheet);

const styletron = new Styletron([styleSheet]);

export default ({ table, toPercent }) => (
  
    
  
);