Blueprintを使用してReactでテーブルをレンダリングする方法

Question

非常に単純なテーブルをReactとBlueprint UIツールキットでレンダリングしようとしています。

Tableのコンポーネントに関連するdocumentationは非常に単純ですが、私のコードは機能しません。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import * as Blueprint from '@blueprintjs/core'; 
import { Cell, Column, Table } from '@blueprintjs/table'; 

const renderCell = (rowIndex: number) => { 
    return <Cell>{`$${(rowIndex * 10).toFixed(2)}`}</Cell> 
}; 

var myTable = (
    <Table numRows={10}> 
    <Column name="Dollars" renderCell={renderCell}/> 
    </Table> 
); 

ReactDOM.render(
    myTable, 
    document.getElementById('myTable') 
); 

以下の画像は、私が得るものを示しています。どうすれば修正できますか？

Answer 1

あなたのページのblueprint.cssとblueprint-table.cssを含めていますか？テーブルはスタイルシートなしで正しくレンダリングされません！

Answer 2

'blueprintjs /コア/ DIST/blueprint.css @' インポート

Answer 3

私は（作成反応するアプリによってWebPACKのセットアップを使用して）私のCSSファイルに次の行を含める必要がありました：

@import '~@blueprintjs/table/dist/table.css';