CODEWITHSUNDEEP
javascriptreactjsreact-table
Jeff Goes
Jeff Goes

Reputation: 555

How can I style React-Table?

I am using react-table to create a filterable table, however I wanted to style it the way I want. Should I change it directly inside node_modules application or should I create my own CSS file and override inspecting the element on the fly?

Upvotes: 8

Views: 34062

Answers (3)

acidjunk
acidjunk

Reputation: 1880

For React-Table v6, you can basically do it in 2 ways if you want to use css files.

  1. Start with the css file from the npm package and override pieces you want to change

  2. Start with your own css file and style everything that needs to be styled

Ad 1:

import "react-table/react-table.css"
import "./your_own_styles.(s)css"

Ad 2:

import "./your_own_styles.(s)css"

To get an idea what you can use in your own css file you can have a look at this gist: https://gist.github.com/sghall/380aa1055bcad4db22d1fc258d7f09d0

Or start by copying the react-table/react-table.css from the react-table npm package (in your node_modules).

Upvotes: 8

mediaguru
mediaguru

Reputation: 1917

Definitely do not change the node_modules. You can either style inline or attach styles.

https://reactjs.org/docs/faq-styling.html

Upvotes: 7

Nick Brady
Nick Brady

Reputation: 6592

Definitely override the CSS classes with your own file. That's common practice for styling components from libraries.

Upvotes: 0

Related Questions