glamor-css-example.jsx

import React, { PureComponent } from "react";
import { render } from "react-dom";
import { css } from "glamor";

const flex = {
  display: "flex"
};

const column = {
  flexDirection: "column"
};

const justify = where => ({
  justifyContent: where
});

const padding = px => ({
  padding: px
});

const mt = px => ({
  marginTop: px
});

const mb = px => ({
  marginBottom: px
});

const container = css({
  ...flex,
  ...column,
  ...padding("50px"),
  ...justify("center"),
  ...mt("10px"),
  ...mb("25px")
});

class MyComponent extends PureComponent {
  render() {
    return (
      <div {...css(container)}>
        <div>I'm a super flexible div</div>
        <div>using glamor.</div>
      </div>
    );
  }
}

render(<MyComponent />, document.getElementById("root"));