2017-05-17 6 views
1

私は非常に反応しています。私はちょうど指示に従って、create-react-appで実験を始めました。空のアプリケーションを作成した後、react-bootstrap-tableのグリッドを追加しようとしました。ノードモジュールからCSSをインポートするためのcreate-react-app

以下

非常に簡単なコード:

import 'react-bootstrap-table/dist/react-bootstrap-table-all.min.css'; 
import React from 'react';  
import ReactDOM from 'react-dom'; 
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 

var products = [{ 
     id: 1, 
     name: "Item name 1", 
     price: 100 
    },{ 
     id: 2, 
     name: "Item name 2", 
     price: 100 
    }]; 

function priceFormatter(cell, row){ 
    return '<i class="glyphicon glyphicon-usd"></i> ' + cell; 
} 

ReactDOM.render(
    <BootstrapTable data={products} striped={true} hover={true}> 
     <TableHeaderColumn dataField="id" isKey={true} dataAlign="center" dataSort={true}>Product ID</TableHeaderColumn> 
     <TableHeaderColumn dataField="name" dataSort={true}>Product Name</TableHeaderColumn> 
     <TableHeaderColumn dataField="price" dataFormat={priceFormatter}>Product Price</TableHeaderColumn> 
    </BootstrapTable>, 
     document.getElementById("root") 
); 

正しく、スタイルシートをロードすることはできていないようですが。

image

私はまた、使用することを試みた:

require('react-bootstrap-table/dist/react-bootstrap-table-all.min.css') 

他の記事からの提案が、運によります。

私は間違いをしましたか?

答えて

0

私は最後に考え出しました。 githubのreact-bootstrap-tableのドキュメントが不完全で、ブートストラップ/反応ブートストラップの依存関係があります。

私は反応ブートストラップとブートストラップモジュールをインストールした後に解決される問題は、ブートストラップCSSをインポートします。

import 'bootstrap/dist/css/bootstrap.min.css'; 
import 'bootstrap/dist/css/bootstrap-theme.min.css'; 
関連する問題