CSSを使ってReactJSをレンダリングする

Question

私はReactの新機能ですが、何らかの理由でCSSを正しくレンダリングできないという問題があります。

私は進行クラスターを持っているカードを表示する必要がある反応クラスAppを持っています。

var App = React.createClass({ 
render: function() { 
    var pushNotifications = _.map(this.props.pushNotifications, function(value, key, notification) { 
     return (
      <div className="row" key={1}> 
       <div className="col-sm-12"> 
        <Card> 
         <h1>Title</h1> 
         <div className="clearfix"> 
          <ol class="progtrckr" data-progtrckr-steps="5"> 
           <li class="progtrckr-done">Order Processing</li> 
           <li class="progtrckr-done">Pre-Production</li> 
           <li class="progtrckr-done">In Production</li> 
           <li class="progtrckr-done">Shipped</li> 
           <li class="progtrckr-todo">Delivered</li> 
          </ol> 
          <div className="pull-right"> 
           <p>Total: {iOSTotal}</p> 
          </div> 
         </div> 
        </Card> 

カードは次のように定義されます

module.exports = React.createClass({ 
    render: function() { 
     return (
      <div className="card"> 
       {this.props.children} 
      </div> 

     ) 
    } 
}); 

そしてproctrckrのCSSのようにCSS /ビルドファイルである：

ol.progtrckr { 
    display: table; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    table-layout: fixed; 
    width: 100%; } 

ol.progtrckr li { 
    display: table-cell; 
    text-align: center; 
    line-height: 3em; } 

ol.progtrckr li.progtrckr-done { 
    color: black; 
    border-bottom: 4px solid yellowgreen; } 

ol.progtrckr li.progtrckr-todo { 
    color: silver; 
    border-bottom: 4px solid silver; } 

ol.progtrckr li:after { 
    content: "\00a0\00a0"; } 

ol.progtrckr li:before { 
    position: relative; 
    bottom: -2.5em; 
    float: left; 
    left: 50%; 
    line-height: 1em; } 

ol.progtrckr li.progtrckr-done:before { 
    content: "\2713"; 
    color: white; 
    background-color: yellowgreen; 
    height: 1.2em; 
    width: 1.2em; 
    line-height: 1.2em; 
    border: none; 
    border-radius: 1.2em; } 

ol.progtrckr li.progtrckr-todo:before { 
    content: "\039F"; 
    color: silver; 
    background-color: white; 
    font-size: 1.5em; 
    bottom: -1.6em; } 

しかし、何らかの理由で、それは同じように表示されます私が入れたCSSは一切含まれていません。

ご迷惑をおかけして申し訳ございません。

おかげで、

Answer 1

はclassNameでclassを交換してください。一般的なjsx gotcha。 Docs。

JSXはJavaScriptがあるので、そのようなclassやforなどの識別子は、XML属性名として落胆 です。代わりに、React DOMコンポーネント は、それぞれclassNameとhtmlForのようなDOMプロパティ名を期待しています。

<ol className="progtrckr" data-progtrckr-steps="5"> 
    <li className="progtrckr-done">Order Processing</li> 
    <li className="progtrckr-done">Pre-Production</li> 
    <li className="progtrckr-done">In Production</li> 
    <li className="progtrckr-done">Shipped</li> 
    <li className="progtrckr-todo">Delivered</li> 
</ol>