How to changeClass name of component from library in React?

Question

I need to change one component style from library pure-react-carousel). in the documents said that it could be done by some class name styles of component like below. I know that i have to change this class "carousel__dot--selected" My question is next - Where I have to define this className in my component file or in some ccs file?

<Dot children={null} className={servicesS['services-slider-dot']} slide={1}/>
<Dot children={null} className={servicesS['services-slider-dot']} slide={2}/>

enter image description here

Answer 1

I'm an author for pure-react-carousel. I think you're having an problem because you are unsure of how React adds classes to components.

By default, pure-react-carousel has very few styles. But every component allows you to add your own styles. In fact, that is the point of pure-react-carousel. We don't dictate what you carousel should look like.

Much like you have to apply styles to table, th, tr, td tags to make a table look the way you want it, you have to apply your own styles to our Dot component.

You are on the right track. In your case you just need create a css rule for .carousel__dot--selected in your project's global css.

Did you set up your project with create-react-app?

Make a file called "global.css" (not global.module.scss It must be a css file) add your rule there and import it into your app's main file.

// global.css

.carousel__dot--selected {
  background-color: yellow;
}