create-react-app to import css from node-module

Question

I'm quite new to react. I've just started following instructions and experimenting with create-react-app. After create a empty application, I tried to add a grid which is from react-bootstrap-table.

Very simple codes below:

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

However it doesn't seem to be able to load stylesheet correctly.

I've also tried to use :

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

according to suggestion from other posts but no luck.

Did I make any mistakes?

Answer 1

I figured out at the end. Looks like document of react-bootstrap-table in github is incomplete and has an dependency of bootstrap/react-bootstrap.

Problem solved after I installed react-bootstrap and bootstrap module also import bootstrap css.

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