create-react-app从node-module导入css

Question

我很反应。我刚开始按照说明操作并尝试使用create-react-app。创建一个空应用程序后，我尝试添加一个来自react-bootstrap-table的网格。

下面非常简单的代码：

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

然而，它似乎无法正确加载样式表。

我也尝试过使用：

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

根据其他帖子的建议，但没有运气。

我犯了什么错误吗？

Answer 1

我最后想通了。看起来github中react-bootstrap-table的文档不完整，并且依赖于bootstrap / react-bootstrap。

安装react-bootstrap和bootstrap模块后问题也解决了，也导入了bootstrap css。

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/css/bootstrap-theme.min.css';