Używanie pakietu npm w Meteor przez kosmos: przeglądarka próbna

Question

Próbuję załadować Radium (co jest biblioteką javascript dla wbudowanych css) zgodnie z instrukcjami here.

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

W package.json: "radium": "0.13.4"

Jednak gdy próbuję użyć Radium w JS w aplikacji, css inline nie działa. Narzędzie do projektowania Chrome wskazuje, że Radium = module.exports(ComposedComponent)..

Zakładam, że powinien to być obiekt, biorąc pod uwagę, że ReactPIXI, który załadowałem w ten sam sposób, działa dobrze, a narzędzie programistyczne mówi: ReactPIXI = Object {factories: Object}.

Oto mój kod:

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

Problem został rozwiązany poprzez owinięcie React.createComponent z radu w sposób opisany w dokumentacji Radium. Zamiast używania miksów, kod wygląda teraz tak i działa zgodnie z przeznaczeniem.

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