通过cosmos在Meteor中使用npm包：browserify

Question

I'm trying to load Radium (which is a javascript library for inline css) following instructions here .

In app.browserify.js : Radium = require("radium"); .

In package.json : "radium": "0.13.4"

However when I try to use Radium in js in the app, the inline css doesn't work. Chrome dev tool indicates that Radium = module.exports(ComposedComponent). .

I'm assuming this should be an object, considering that ReactPIXI that I loaded the same way, works just fine, and the dev tool says ReactPIXI = Object {factories: Object} .

Here is my code:

AppBody = React.createClass({
  mixins: [ReactMeteorData, Navigation, State, Radium.StyleResolverMixin,   
  Radium.BrowserStateMixin],

render: function() {
  var self = this;
  var styles = {
    base: {
      color: this.state.fontColor,
      background: 'red',
    states: [
      {hover: {background: 'blue', color: 'red'}},
      {focus: {background: 'pink', outline: 'none', color: 'yellow'}}
    ]

    //also tried
    //':hover': {background: 'blue', color: 'red'},
    //':focus': {background: 'pink', outline: 'none', color: 'yellow'}
  },
  primary: {
    background: 'green'
  },
  warning: {
    background: 'purple'
  }
};


var items = this.state.items.map(function(item, i) {
  return (
      <div>
        <div style= {[styles.base, styles['warning']]} key={item}>
      // also tried <div style = {this.buildStyles(styles)} key={item}>
          {item}
        </div>
        <button style = {[styles.base, styles['warning']]} onClick={update} >Remove</button>
      </div>
  );
}.bind(this));
return (
       {items}
     )

Answer 1

The issue was resolved by wrapping the React.createComponent with Radium as instructed in the Radium documentation. Instead of using the mixins, the code now looks like this and it works as intended.

AppBody = Radium(React.createClass({
  mixins: [ReactMeteorData, Navigation, State],

render: function() {
  var self = this;
  var styles = {
    base: {
      color: this.state.fontColor,
      background: 'red',
    ':hover': {background: 'blue', color: 'red'},
    ':focus': {background: 'pink', outline: 'none', color: 'yellow'}
  },
  primary: {
    background: 'green'
  },
  warning: {
    background: 'purple'
  }
};


var items = this.state.items.map(function(item, i) {
  return (
  <div>
    <div style= {[styles.base, styles['warning']]} key={item}>
      {item}
    </div>
    <button style = {[styles.base, styles['warning']]} onClick={update} >Remove</button>
  </div>
);
}.bind(this));
  return (
        {items}
      )
)}));