如何在我的 react 项目中使用 react-table 中的 css 文件以及 css 模块？答案

【问题标题】：How can I use the css file from react-table in my react project along with css modules?如何在我的 react 项目中使用 react-table 中的 css 文件以及 css 模块？
【发布时间】：2020-09-29 03:15:54
【问题描述】：

我一直在我的 react 项目中使用 css 模块，最近使用 THIS SITE 安装了 react-table，但是我在导入它的 css 文件时遇到了问题。 react-table 的来源说我需要从 react-modules 导入 css 文件，例如：

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

但它不起作用。我认为它与使用 css 模块有关，但我不知道如何修复它。我找到了THIS THREAD 关于这个问题，但不知道是否真的有解决方案。

【问题讨论】：

你能在问题中包含你的 webpack 加载器吗？
如果你能告诉我该怎么做，我将不胜感激，因为我从未直接处理过 webpack 加载器
你使用的是什么开发环境？创建反应应用程序？
好的。 You can use css modules with CRA by naming your files example.module.css 没有弹出。
如果你已经弹出并且react-table/react-table.css 被视为 css 模块，你必须查看你的 webpack 配置文件，看看你是如何根据教程更改它们的。您可能想使用resource query，这样您就可以将文件视为常规css，例如import "react-table/react-table.css?no-module";

标签： css reactjs css-modules react-table

【解决方案1】：

从“react-table-6”导入 ReactTable

导入'react-table-6/react-table.css'

这解决了我的问题。以供参考： https://www.npmjs.com/package/react-table-6

【讨论】：

【解决方案2】：

如果你想要完整的 .js 环境，你可以使用styled-components

通过将react-table.css 转换为组件，我真的很喜欢使用它。像这样包装它：

import styled from 'styled-components';

const ReactTableStyles = styled.div`
// react-table.css content
`;
export default ReactTableStyles;

然后在你的 ReactTable 组件中，你只需要像这样嵌套在它里面：

   <ReactTableStyles>
      <ReactTable
        ... />
   </ReactTableStyles>

希望对某人有所帮助。

【讨论】：