0

I have been using css modules in my react project, and recently installed react-table using THIS SITE, but I'm having problem importing its css file. The source of react-table says I need to import the css file from react-modules like:

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

but it doesn't work. I think it has something todo with using css modules, but I don't know how to fix it. I found THIS THREAD about this issue, but couldn't understand if there really is a solution for it or not.

brainoverflow
  • 691
  • 2
  • 9
  • 22
  • Could you include your webpack loaders in the question? – Tholle Jul 15 '18 at 18:49
  • I'd appreciate if you tell me how to do that since I've never dealt with webpack loaders directly – brainoverflow Jul 15 '18 at 18:51
  • What development environment are you using? create-react-app? – Tholle Jul 15 '18 at 18:53
  • Yes I'm using create react app and I did "npm-run-eject" in the beginning to be able to use css modules. – brainoverflow Jul 15 '18 at 18:56
  • 1
    Alright. [You can use css modules with CRA by naming your files `example.module.css`](https://github.com/facebook/create-react-app/blob/366e5d3475fa21fe4743c6865b870d9f0e2bbbcc/packages/react-scripts/config/webpack.config.dev.js#L299-L308) without ejecting though. – Tholle Jul 15 '18 at 19:11
  • Yes I could probably do that but I was following a tutorial when I started building this app, and it seems once the app is ejected, there is no way back. It is a project being worked on with some other people on github, so I can't create a new one – brainoverflow Jul 15 '18 at 19:20
  • 1
    If you have ejected and `react-table/react-table.css` is being treated as css modules, you must look in your webpack configuration files and see how you changed them according to the tutorial. You might want to use a [resource query](https://webpack.js.org/configuration/module/#rule-resourcequery) so you can treat the file as regular css with e.g. `import "react-table/react-table.css?no-module";` – Tholle Jul 15 '18 at 19:23

2 Answers2

1

import ReactTable from 'react-table-6'

import 'react-table-6/react-table.css'

This solved my problem. For Reference: https://www.npmjs.com/package/react-table-6

preethiannjacob
  • 11
  • 1
0

If you want full .js environment you can use styled-components

I really having zen using it by converting react-table.css to component. just wrap it like this:

import styled from 'styled-components';

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

Then in your ReactTable component, you just need to nest inside it as so:

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

Hope it helps someone.

Ardhi
  • 2,855
  • 1
  • 22
  • 31