找不到模块：无法解析 'react-table/react-table.css'

Question

我已经使用 create-react-app 创建了应用程序。然后我安装了 react-table 包（使用命令 npm install --save react-table）。当我启动我的应用程序时，我收到 未找到模块：无法解决 'react-table/react-table.css' 此错误。

关于如何解决这个问题的任何建议。提前致谢！

Answer 1

遗憾的是 react-table v7 不支持 react-table.css 文件。

如果你想重用react-table.css，我推荐使用v6。这是我的例子：

https://codesandbox.io/s/react-table-custom-pagination-1onbd

我们可以轻松地为 react-table 创建自定义 css 并且网上有很多示例。

Answer 2

您应该安装 react-table 版本 6。

$ npm install react-table-6

然后导入这些，

import ReactTable from "react-table-6";  
import "react-table-6/react-table.css"

Answer 3

import ReactTable from "react-table-6";

这个应该是“react-table-v6”

import "react-table-v6/react-table.css"

Answer 4

react-table的当前版本是7。 React table 6th version 支持cs,

你应该安装 react-table version-6.

$ npm install react-table-6

下一步将其导入文件

    import ReactTable from "react-table-6";  
    import "react-table-6/react-table.css" 

**Sample Code** 

import React, {useState, useEffect,Component } from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import $ from 'jquery';
import './Markettable.css';
import 'datatables.net';
import 'datatables.net-dt/css/jquery.dataTables.css';
import axios from 'axios';
import ReactTable from "react-table-6";  
import "react-table-6/react-table.css" ;



export default class Markettable extends Component {
  constructor(props){
    super(props)
    this.state = {
      market: [],
      loading:true
    }
  }

async getMarketPrice(){
    const res = await axios.get(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&sparkline=false&price_change_percentage=1h%2C24h%2C7d`)
    console.log(res.data)
    this.setState({loading:false, market: res.data})
  }

  componentDidMount(){
    this.getMarketPrice()
  }

 render() {
    const columns = [{  
      Header: 'ID',  
      accessor: 'name',
      sortable: true,

     }
     ,{  
      Header: 'Name',  
      accessor: 'precentage' ,
      },
      {  
        Header: 'Website',  
        accessor: 'market_cap',
        }
  ]
    return (
        <>
        <div className= "container-fluid">
      

      <div className="header">
        <h2 className= "page-header text-center text-uppercase">
        <b> Marketing Prices </b>
        </h2>
         <ul className="breadcrumb ">
                 <li><a href="#" style={{color: 'black'}}>Home</a></li>

                <li className="active" style={{color: '  #660000'}}>Marketing Price</li>
            </ul>
      </div>

      <div className ="row">
      <div className = "col-12">
        <div className="card">
                        <div className="card-action">

                        <div className="marketprice">
                        <div className="row">
                        <div className ="col-12">
                        <div className ="card">
                        <div className="card-body">
                        <h2> <b> <u> MARKETING PRICE TABLE </u> </b> </h2>
                        </div>
                        <br/>

                           <div className="card-body--">

      <ReactTable  className ="text-center" 
      data={this.state.market}  
      columns={columns}  
   />
   
                           </div>
                           </div>
                           

                        </div>
                        
                        </div>
                        </div>
                        </div>
                        </div>
      </div>
      </div>
      </div>

   </>
    )
  }
}

找不到模块：无法解析 'react-table/react-table.css'

Module not found: Can't resolve 'react-table/react-table.css'

reactjs

create-react-app

react-table