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?

AlHecka · Accepted Answer · 2017-05-22 03:29:14Z

4

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

answered May 22, 2017 at 3:29

AlHecka

811 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related