Decorator behavior varies from Component declaration

[ShaunSpringer]

So when I use the @radium decorator versus the export default Radium(Button) method, the behavior for concatenating styles varies.

Code Below:

import React, { Component } from 'react';
import Radium from 'radium';
import Theme from '../theme/theme.js'

let styles = {
  base: {
    border: '0px',
    borderRadius: '25px',
    padding: Theme.padding.button,
    fontSize: Theme.text.size.medium,
    color: Theme.colors.white,
    display: 'inline-block',
    textDecoration: 'none'
  },
  primary: {
    backgroundColor: Theme.colors.purple
  }
};

// Using @Radium here (versus in the export definition) means my styles do not get applied
class Button extends Component {
  static propTypes = {
    link: React.PropTypes.string.isRequired,
    text: React.PropTypes.string.isRequired,
    kind: React.PropTypes.oneOf(['primary', 'secondary']).isRequired
  };

  render() {
    return (
      <a href={ this.props.link }
        style={[
          styles.base,
          styles[this.props.kind]
          ]}>
         { this.props.text }
      </a>
    );
  }
}

// Using this method, it works as defined
export default Radium(Button);

Essentially when I use the decorator, my styles array doesnt get assigned, but when I use the method declaration via export it works perfectly.

[alexlande]

Hey @ShaunSpringer, sorry you ran into trouble here. I'm going to punt on this one by saying that we're going to remove the decorator syntax from the docs and suggest wrapping components with Radium() instead. Slightly more details here: #924

You might try dropping your component into the Radium examples to see what happens. If I had to guess, you might have been seeing this issue because you're using the new stage 2 decorators Babel plugin and not the legacy version. (This discrepancy and changes in the API are the primary reason we're going to stop recommending them until they're totally stable).