How to use the radium.wrap function in radium

var React = require('react');
var Radium = require('radium');
var color = require('color');

var Button = React.createClass(Radium.wrap({
  displayName: "Button",

  propTypes: {
    kind: React.PropTypes.oneOf(['primary', 'warning']).isRequired
  },

  render: function () {
    // Radium extends the style attribute to accept an array. It will merge
    // the styles in order. We use this feature here to apply the primary
    // or warning styles depending on the value of the `kind` prop. Since its
    // all just JavaScript, you can use whatever logic you want to decide which
    // styles are applied (props, state, context, etc).
    return (

logoLink: {
    display: 'block',
    margin: '16px 0'
  },

  link: {
    fontWeight: 700,
    color: '#FF4136',

    ':hover': {
      color: '#fff'
    }
  }
};

export default React.createClass(Radium.wrap({
  displayName: 'Footer',

  render() {
    return (
      <footer style="{styles.footer}">
        
          <p>
           Made with love in Seattle by

           <a href="http://formidablelabs.com" style="{styles.logoLink}">
             </a></p></footer>

e.stopPropagation();
    if (this.props.clickable) {
      this.props.onClick(this.props.name, this.props.tagGroup);
    }
  },

  onMouseOver() {
    this.setState({hovered: true});
  },

  onMouseOut() {
    this.setState({hovered: false});
  },
}));

var Resource = React.createClass(Radium.wrap({
  render() {
    var {title, linkUrl, imgUrl, imgFit, authors, stars, tags, blurb} = this.props.data;

    var contentsStyle = {
      display: 'inline-block',
      verticalAlign: 'top',
      color: textColor,
      fontSize: '13.25px',
      marginLeft: dims.horPadding,
      maxWidth: dims.contentsWidth,
      [foldedMediaQuery]: {
        marginTop: dims.horPadding,
        marginLeft: 0
      },
    };

lineHeight: '81px',
    border: '4px solid'
  },

  highlight: {
    color: '#E55A5F'
  },

  text: {
    fontFamily: 'kulturista-web, Georgia, Times New Roman, serif',
    fontWeight: 300,
    display: 'block'
  }
}

export default React.createClass(Radium.wrap({
  render() {
    return (
      <div style="{styles.base}">
        <h1 style="{logoStyles.base}">
          
            <span style="{logoStyles.badge}">
              ES
              <span style="{logoStyles.highlight}">6</span>
            </span>
            <span style="{logoStyles.text}">Interactive Guide</span>
          
        </h1>
</div>

paddingRight: 32,
    paddingLeft: 32
  },

  '@media (min-width: 800px)': {
    paddingRight: 48,
    paddingLeft: 48
  },

  '@media (min-width: 1024px)': {
    paddingRight: 80,
    paddingLeft: 80
  }
};

export default React.createClass(Radium.wrap({
  render() {
    return (
      <div style="{[">
        {this.props.children}
      </div>
    );
  }
}));

const exampleHandlers = exampleListMap.map((exampleObj, index) => {
  return React.createClass(Radium.wrap({
    displayName: exampleObj.name,
    render() {
      return (
        <div>
          <h2 style="{headingStyles.base}">
            <span style="{headingStyles.counter}">{index + 1}</span>
            {exampleObj.name}
          </h2>
          
        </div>
      );
    }
  }));
});