Menu
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?
953
Using styled-components To use styled-components , install the library and import it into your project. Create a component Styles that uses styled from the styled-components library to create a div with the styles for your table in CSS. Move all of your code for creating the Table component into its own function.
Sharing styles across many React components The style objects and the components do not have to be in the same file. We can create a separate . js file for our styles, export these styles, and then import them into the component where we want to use them. Doing this makes styles reusable across multiple components.
For React-Table v6, you can basically do it in 2 ways if you want to use css files.
Start with the css file from the npm package and override pieces you want to change
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).
169
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
