Brainstorming some high performance alternatives to using styled with emotion. Bonus glamor version.

class-property-method.js

import { css } from 'emotion'

class Profile extends Component {
  css = (p) => css`
    color: blue;
    height: ${p.parentHeight};  
  `
  render() {
    return (<div className={this.css(props)}/>)
  }
}

glamor-class-property.js

import css from 'glamor'

class Profile extends Component {
  css = (p) => css({
    color: 'blue',
    height: p.parentHeight
  })

  render() {
    return (<div className={this.css(props)}/>)
  }
}

property.js

import { css } from 'emotion'

class Profile extends Component {
  render() {
    return (<div className={this.css(props)}/>)
  }
}


Profile.css = (p) => css`
  color: blue;
  height: ${p.parentHeight};  
`