如何为React-Table设置样式？

Question

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?

Answer 1

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).

Answer 2

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

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

Answer 3

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