Question

我最近了解了reactjs并试了一下。 npm存储库中有很多可用的组件，我可以下载并使用它们。但是，我没有找到在组件内部的元素上添加css的好方法。像这个反应标签：https://github.com/reactjs/react-tabs。我可以在我的网页上使用它，但我如何在选项卡上添加css样式？

Answer 1

使用className或内联样式

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

或

<div style={{color: 'black'}}></div>

Answer 2

如果您查看react-tabs源代码，您会看到Tab组件接受className作为道具，因此您可以为标签HTML元素传递自己的类名。但是，开发人员有责任为其组件实现className和style属性逻辑。

Answer 3

这个问题没有一般性的答案，除了你设置组件样式就像设置任何HTML元素一样：例如使用class或ids。这意味着它取决于组件的实现方式，并且要求您至少了解组件将生成的HTML DOM树。

在您提供的库中，您可以为选项卡提供className属性（React中的className定义生成节点的class属性）。因此，您可以编写<Tab className="my-class" />并使用.my-class为组件设置样式。

Answer 4

您可以将多个css样式应用于React组件。见下面的一堆代码：

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

}）;

假设我想根据条件在标签上添加css（active）。所以我们可以这样做：

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

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

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

4 个答案: