How to use emotion - 10 common examples

import emotion from 'emotion'

// ⚠️ EMPTY BLOCK ⚠️
const Button = emotion.div`

`

.map((utility) => {
    // Call `styleWith` as if it was being used & extract the non-reset class
    // (e.g. `css-1234`)
    const [, emotionclassName] = benefit.styleWith(utility).split(" ")

    // Remove the `css-` prefix
    // (e.g. `1234`)
    const [, hash] = emotionclassName.split("-")

    // Get the rule as it would be inserted
    // e.g. css-1234:hover{opacity:0;}
    const inserted = emotion.cache.inserted[hash]

    // Replae `css-1234` with `hover:opacity-0`
    return inserted.replace(
      emotionclassName,
      utility.replace(":", "\\:").replace("/", "\\/")
    )
  })
  .join("\n")

envPresetColumnLabel: css({
    marginBottom: "0.75rem",
  }),
  envPresetRow: css({
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    flex: "0 0 auto",
    margin: "0.5rem",
  }),
  envPresetNumber: css({
    flex: "0 0 4rem",
    maxWidth: "4rem",
    paddingLeft: "0.75rem",
  }),
  pluginName: css({
    width: "100%",
    padding: "0.75rem",
    marginBottom: "1rem",
  }),
  envPresetCheckbox: css({
    flex: "0 0 auto",
    margin: "0 0 0 0.75rem !important", // TODO (bvaughn) Override input[type="checkbox"] style in main.css
  }),
  envPresetLabel: css({
    flex: 1,
    color: colors.inverseForeground,

    ":hover": {
      textDecoration: "none",
      color: colors.inverseForeground,
    },

// @flow
import React from "react";
import { List } from "@webiny/ui/List";
import Revision from "./Revision";
import { Elevation } from "@webiny/ui/Elevation";
import { css } from "emotion";
import { CircularProgress } from "@webiny/ui/Progress";

const listWrapper = css({
    margin: 25,
    display: "flex",
    flexDirection: "column",
    overflow: "scroll",
    maxHeight: "calc(100vh - 160px)",
    ".mdc-list .mdc-list-item": {
        borderBottom: "1px solid var(--mdc-theme-on-background)"
    },
    ".mdc-list .mdc-list-item:last-child": {
        borderBottom: "none"
    }
});

const RevisionsList = ({ pageDetails: { page }, loading }: Object) => {
    return (

// @flow

import React from "react";
import { Router, Route, browserHistory } from "react-router";
import { createApp } from "@phenomic/preset-react-app/lib/client";
import { hydrate } from "emotion";
import styled from "react-emotion";

// window._emotion is set inside html.js and caches emotion styles
if (typeof window !== "undefined" && window._emotion) {
  hydrate(window._emotion);
}

const Title = styled("h1")`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Title2 = styled("h1")`
  font-size: 2em;
  text-align: right;
  color: blue;
`;

export default createApp(() => (

import { hydrate } from 'emotion'
import { registerLanguage as registerHighlight } from 'react-syntax-highlighter/light'
import { registerLanguage as registerPrism } from 'react-syntax-highlighter/prism-light'
import { languages } from '@codegen/loadSyntax' // eslint-disable-line
import history from './history'
import App from './application'

const { _EMOTION_IDS_ } = window
const isDev = process.env.NODE_ENV === 'development'

// https://github.com/timberio/gitdocs/issues/114
// const render = isDev ? ReactDOM.render : ReactDOM.hydrate
const render = ReactDOM.render

isDev && module.hot && module.hot.accept()
_EMOTION_IDS_ && hydrate(_EMOTION_IDS_)

// Ensure required languages are registered
const renderers = {
  hljs: registerHighlight,
  prism: registerPrism,
}

if (window) {
  const register = renderers[process.env.PROPS.config.syntax.renderer]
  languages.forEach(lang => register(lang.name, lang.func))
}

render(
  
    
  ,

import {hydrate as emotionHydrate} from 'emotion';
import {Provider} from 'react-redux';

import ReactHotLoader from './ReactHotLoader';
import Root from './app/Root';
import history from './app/history';
import configureStore from '../../common/configureStore';
import '../css/index.scss';
import DevTools from '../../common/DevTools';


/** ******************
 *  Server hydration
 ******************* */
if (window.EMOTION_IDS) {
    emotionHydrate(window.EMOTION_IDS);
}

const {store} = configureStore(history, window.REDUX_STATE);

FastClick.attach(document.body);
// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();

const root = document.getElementById('root');
const devTools = document.getElementById('devTools');

const renderApp = (RootElement) => {
    const app = (

import ReactHotLoader from './app/ReactHotLoader';
import Root from './app/Root';
import history from './app/history';
import configureStore from '../../common/configureStore';
import '../css/index.scss';

// setup grpc config
import {setup} from './grpc/init';
setup();

/** ******************
 *  Server hydration
 ******************* */
if (window.EMOTION_IDS) {
    emotionHydrate(window.EMOTION_IDS);
}

const {store} = configureStore(history, window.REDUX_STATE);

FastClick.attach(document.body);
// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();

const root = document.getElementById('root');

const renderApp = (RootElement) => {
    const app = (

constructor(props: any) {
    super(props);
    // https://github.com/emotion-js/emotion/blob/108d78aa176aedfddc0854ebe4049847a9ac2a9b/docs/ssr.md#hydrate
    if (typeof window !== "undefined") {
      hydrate(window.__NEXT_DATA__.ids);
    }
  }

import React from 'react'
import Router from 'next/router'
import Progress from 'nprogress'
import {Provider} from 'react-redux'
import {hydrate, injectGlobal} from 'emotion'
import {ThemeProvider} from 'theming'
import {lifecycle} from 'recompose'

import store from '../ducks'
import {font} from '../core/style'

const theme = {}

if (typeof window !== 'undefined') {
  hydrate(window.__NEXT_DATA__.ids)

  Router.onRouteChangeStart = () => Progress.start()
  Router.onRouteChangeComplete = () => Progress.done()
  Router.onRouteChangeError = () => Progress.done()
}

const enhance = lifecycle({
  componentWillMount() {
    /* eslint no-unused-expressions: 0 */

    injectGlobal`
      body {
        margin: 0;
        font-family: ${font};
        font-weight: 300;
      }