Utilizzo del pacchetto npm in Meteor tramite cosmo: browserify

Question

Sto provando a caricare Radium (che è una libreria javascript per css in linea) seguendo le istruzioni here.

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

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

Tuttavia quando provo ad usare Radium nel js in app, il css inline non funziona. Lo strumento di sviluppo di Chrome indica che Radium = module.exports(ComposedComponent)..

Presumo che questo dovrebbe essere un oggetto, considerando che ReactPIXI che ho caricato allo stesso modo, funziona perfettamente e lo strumento dev dice ReactPIXI = Object {factories: Object}.

Ecco il mio codice:

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

Il problema è stato risolto avvolgendo il React.createComponent con Radium come indicato nella documentazione Radium. Invece di usare i mixin, il codice ora sembra così e funziona come previsto.

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} 
    ) 
)}));