I'm trying to change the styles of React-Slick carousel that I use in my GatsbyJS project. In my Slider component I import the libarary the way it's shown in the official docs:

import Slider from "react-slick"
import "slick-carousel/slick/slick.css"
import "slick-carousel/slick/slick-theme.css"

Now I want to change the styles of the carousel so I go to node_modules/slick-carousel/slick/slick.css and edit some styles. But it doesn't affect the way the carousel looks. In dev tools of my browser I see that the styles for the carousel are taken from commons.css. And those styles are the original (not edited). I also edited the .less and .scss files in the same folder but the carousel still looks the same.

Okay. I renamed the slick.css, .less and .scss files to random names. But the carousel still has the original look. Seems like those files doesn't affect anything. But! If I delete this line

import "slick-carousel/slick/slick.css"

the whole carousel is broken like it has no css at all.

So I wonder why does it work like this? And how do I change the styles of the React-Slick carousel?

CodePudding user response：

You need to edit dist folder from the library if you want it to work. Changes will not apply if you edit from the source and not from the output bundles.

However, if you want to edit slick styles just overwrite them in your app css, dont edit stuff in node_modules, thats highly not recommended.(you may need to throw some !important though)