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

Posted 2023-02-19

【中文标题】找不到模块：无法解析“react-table/react-table.css”

【英文标题】：Module not found: Can't resolve 'react-table/react-table.css'

【发布时间】：2020-07-12 09:00:40

【问题描述】：

我已经使用 create-react-app 创建了应用程序。然后我安装了 react-table 包（使用命令 npm install --save react-table）。当我启动我的应用程序时，我收到 Module not found: Can't resolve 'react-table/react-table.css' 这个错误。

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

【问题讨论】：

看看***.com/questions/51503415/…

@carrany 我这里没有使用 webpack 配置。使用 create-react-app 创建了简单的应用程序

在这里我得到了答案github.com/tannerlinsley/react-table/issues/1769

【参考方案1】：

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

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

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

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

【参考方案2】：

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

$ npm install react-table-6

然后导入这些，

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

【参考方案3】：

import ReactTable from "react-table-6";  

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

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

【参考方案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>

   </>
    )