Javascript 如何使用Blueprint在React中呈现表格

我试图用React和UI工具包呈现一个非常简单的表

相对于

表

组件的操作非常简单，但我的代码似乎不起作用

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

从“React”导入React；
从“react dom”导入react dom；
从'@blueprintjs/core'导入*作为蓝图；
从'@blueprintjs/Table'导入{Cell，Column，Table}；
const renderCell=（行索引：number）=>{
返回{`$${（rowIndex*10.toFixed（2）}`}
};
var myTable=(
);
ReactDOM.render(
我的桌子，
document.getElementById（'myTable'）
);

下图显示了我得到的结果。我怎么修理它

---

您是否在页面中包含

blueprint.css

和

blueprint table.css

？如果没有样式表，该表将无法正确呈现

导入'@blueprintjs/core/dist/blueprint.css'

我必须在css文件中包含这一行（使用create react应用程序的网页设置）：

对我来说

yarn add @blueprintjs/core @blueprintjs/table

然后使用react组件文件中的相对路径

import { Cell, Column, Table } from '@blueprintjs/table'

import '../../node_modules/@blueprintjs/table/lib/css/table.css'

---

我也有同样的问题，建议的include不适用于使用webpack的锅炉板，require（）也不会包含css，因为@blueprintjs模块名中有@，有什么想法吗？有趣的是……这不在列表中。对我来说，文件位于

节点模块/@blueprintjs/table/dist/table.css

（注意不同的css文件名）。对于blueprint 3+react:import'@blueprintjs/table/lib/css/table.css'

import { Cell, Column, Table } from '@blueprintjs/table'

import '../../node_modules/@blueprintjs/table/lib/css/table.css'