Javascript 在Meteor via cosmos:browserify中使用npm包

我正试图按照说明加载Radium（这是一个用于内联css的javascript库）

在app.browserify.js中：

Radium=require（“镭”）

在
package.json
：
“镭”：“0.13.4”

然而，当我尝试在应用程序的js中使用Radium时，内联css不起作用。Chrome开发工具表明镭=module.exports（ComposedComponent）。

我假设这应该是一个对象，考虑到我以相同方式加载的ReactPIXI工作正常，开发工具说

ReactPIXI=object{factories:object}

这是我的密码：

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

AppBody=React.createClass({
mixin:[数据，导航，状态，镭.StyleResolverMixin，
镭BrowserStateMixin]，
render:function（）{
var self=这个；
变量样式={
基数：{
颜色：this.state.fontColor，
背景：“红色”，
国家：[
{悬停：{背景：“蓝色”，颜色：“红色”}，
{焦点：{背景：“粉色”，轮廓：“无”，颜色：“黄色”}
]
//也试过
//“：hover'：{背景：“蓝色”，颜色：“红色”}，
//“：焦点：{背景：“粉色”，轮廓：“无”，颜色：“黄色”}
},
主要：{
背景：“绿色”
},
警告:{
背景：“紫色”
}
};
var items=this.state.items.map（函数（项，i）{
返回(
//也试过
{item}
去除
);
}.约束（这个）；
返回(
{items}
)

按照文档中的说明，通过使用镭包装React.createComponent解决了该问题。现在，代码看起来像这样，可以按预期工作

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

AppBody=Radium（React.createClass({
混合：[数据、导航、状态]，
render:function（）{
var self=这个；
变量样式={
基数：{
颜色：this.state.fontColor，
背景：“红色”，
“：hover'：{背景：“蓝色”，颜色：“红色”}，
“：焦点：{背景：“粉色”，轮廓：“无”，颜色：“黄色”}
},
主要：{
背景：“绿色”
},
警告:{
背景：“紫色”
}
};
var items=this.state.items.map（函数（项，i）{
返回(
{item}
去除
);
}.约束（这个）；
返回(
{items}
)
)}));

您是否仍然存在此问题Javva如果是，我今晚将尝试尝试解决。是的，仍然无法解决此问题。谢谢。昨晚我的设置无法复制此问题。我怀疑这完全是一个加载顺序问题。Meteor以非常特定的顺序加载文件夹和文件夹中的项目。我将再次查看并放置00-或01-在文件夹名称前面，以确保它们也按您希望的顺序加载。很高兴您能够找到答案，请记住将您自己的答案标记为已接受的答案。