Javascript 如何在react组件上应用css样式

我最近认识了reactjs，并尝试了一下。npm存储库中有很多可用的组件，我可以下载并使用它们。但是，我没有找到一个好的方法在组件内部的元素上添加css。就像这个一样。我可以在我的网页上使用它，但如何在选项卡上添加css样式？

使用类名或类似的内联样式

<div className='xxx'></div>

或

如果查看

react tabs

源代码，您将看到

Tab

组件接受

className

作为一个道具，因此您可以为Tab HTML元素传递自己的类名。但是，开发人员始终有责任为他们的组件实现

className

和

style

属性逻辑。

这个问题没有一般性的答案，除非您像为任何HTML元素设置样式一样为组件设置样式：例如使用

class

或

ids

。这意味着它取决于组件的实现方式，并且要求您对组件将生成的HTMLDOM树有最低限度的了解

---

在您提供的库中，您可以为选项卡提供一个

className

属性（

className

中定义生成节点的

class

属性）。因此，您可以编写

并使用

.my class

来设置组件的样式。

您可以对一个组件应用多个css样式。 请参见下面的一组代码：

var MultipleCss = React.createClass({
   getInitialState: function(){
    return {
        score: 20
    }
   },
render: function() {

  const starrate = {
    star:{
      clear: 'none',
      float: 'left',
      margin: '0px 4px 0px 0px',
      display: 'block',
      width: '15px',
      height: '15px',
      minWidth: '15px',
      padding: '0px',
      cursor: 'pointer',
      background: 'url(' + 'sprite.png' + ') no-repeat'
    },
    position:{
      backgroundPosition: '-257px -147px'
    },
    active: {
      backgroundPosition: '-235px -147px'
    }
  };
  return (
    < div>
      <label style={Object.assign({}, starrate.star, starrate.position)}> </label>
    </div>
  );
}

var MultipleCss=React.createClass({
getInitialState:函数（）{
返回{
分数：20
}
},
render:function（）{
常数星号={
明星：{
明确：“无”，
浮动：'左'，
边距：“0px 4px 0px 0px”，
显示：“块”，
宽度：“15px”，
高度：“15px”，
最小宽度：“15px”，
填充：“0px”，
光标：“指针”，
背景：“url（+'sprite.png'+'）不重复”
},
职位：{
背景位置：'-257px-147px'
},
活动：{
背景位置：'-235px-147px'
}
};
返回(

);
}

}))

假设我想根据一个条件在标签上添加css（活动）。因此，我们可以如下所示：

<label style={Object.assign({}, starrate.star, starrate.position, this.state.score >=20 && starrate.active)}> </label>

=20&&starate.active）}>

---

因此，只要state.score>=20，标签上就会应用活动类。

您可以在想要添加的地方共享演示/直播链接吗？

<label style={Object.assign({}, starrate.star, starrate.position, this.state.score >=20 && starrate.active)}> </label>