如何在反应组件上应用 css 样式答案

【问题标题】：How can I apply css style on react component如何在反应组件上应用 css 样式
【发布时间】：2016-04-13 06:44:37
【问题描述】：

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

【问题讨论】：

你能分享一下你想添加的演示/直播链接吗？

标签： javascript css reactjs

【解决方案1】：

使用类名或内联样式

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

或

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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 >=20 时，活动类将应用于标签。

【讨论】：