React Bootstrap table не форматирует

Question

Я очень новичок, чтобы реагировать, и я пытаюсь следовать базовому учебнику по таблицам: (http://allenfang.github.io/react-bootstrap-table/example.html#basic)

Я установил таблицу реакции-начальной загрузки

npm.таблица начальной загрузки --save

Я импортировал таблицу начальной загрузки

import {BootstrapTable, TableHeaderColumn} из таблицы реагирующих таблиц;

Я импортировал файл css:

import '../../node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css';

С учетом вышесказанного я ожидаю, что таблица будет отображаться следующим образом:

Однако то, что я вижу с моим кодом:

Почему таблица не выглядит так, как в примере?

import React, { Component } from "react";
import './MenuButton.css';
import './MenuContainer.css';
import MenuButton from './MenuButton';
import Menu from './Menu';
import serverCall from "../api/ServerCall";
import {BootstrapTable,TableHeaderColumn} from 'react-bootstrap-table';
import '../../node_modules/react-bootstrap-table/css/react-bootstrap-table.css'


class MenuContainer extends Component {

    constructor(props, context) {
        super(props, context);
        this.state = {
            visible: false
        };
        this.handleMouseDown = this.handleMouseDown.bind(this);
        this.toggleMenu = this.toggleMenu.bind(this);

        this.getCustomers();
    }

    handleMouseDown(e) {
        this.toggleMenu();
        e.stopPropagation();
    }

    toggleMenu() {
        this.setState({
            visible: !this.state.visible
        });
    }

     getCustomers(){
              console.log("Getting Customers");
        serverCall(function(error, response) {
            if (error) {
                alert("Authorization Failed.")
            } else {
                console.log(response);

            }
        },"","customers.php");
    }

    render() {


        let products = [{
            id: 1,
            name: "Item name 1",
            price: 100
        },{
            id: 2,
            name: "Item name 2",
            price: 100
        }];

        return (

            <div>
                <div className="menu-container">
                    <div className="grid-item-hamburger-menu">
                        <MenuButton handleMouseDown={this.handleMouseDown}/>
                        <Menu handleMouseDown={this.handleMouseDown} menuVisibility={this.state.visible}/>
                    </div>

                    <div className="grid-item-dashboard-title">
                        Dashboard | Customers
                    </div>

                    <div className="grid-item-search">
                    </div>

                    <div className="grid-item-table">

                        <BootstrapTable data={ products }>
                            <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
                            <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
                            <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
                        </BootstrapTable>
                </div>
                </div>
            </div>
        );
    }
}

export default MenuContainer;

Answer 1

Для дальнейшего использования вам нужно импортировать только из базы приложения, а не по пути node_modules.Я использую следующее, и оно отлично работает:

import 'react-bootstrap-table/dist/react-bootstrap-table-all.min.css'

Answer 2

попробуйте эту строку импортировать '../../node_modules/react-bootstrap-table/css/react-bootstrap-table.css' в компоненты основного входа