How to override react-slick default style for one slider?

Question

I want to display slick carousels with customized prev/next arrows and the position of the arrow. I am using nextjs13, chakra-ui, react-slick, and vanilla extract.

I actually could customize the arrows' style by passing arrow component

const settings = {
  ...
  prevArrow: <Arrow />
};

and the position of the arrow by setting global css 'slick-prev'.

The problem is that I want to apply this position style for a specific slider only. (there are multiple sliders and I want to apply different styles)

I have tried something like this using vanilla-extract class,

export const classname = style({...})

<Slider className={classname} /> 

but this does not work because the classname should be 'slick-prev' to override the default one.

Also, ↓does not work

const settings = { ... prevArrow: };

I've also tried creating css file

.slick-prev {
    font-size: 15px !important;
}

and importing that file inside a specific component but it affects sliders on other pages as well.

Does anyone know how I can override '.slick-prev' style for one specific slider?

Answer 1

I think you should set css command like following if you set font size of prev and next arrows in global css file.

.slick-next:before, .slick-prev:before {
    font-size: 15px !important;
}

Current next/prev arrow components are based on Icon component, so to change size of arrows, we should set font-size by using before But if you use image or text button component for next/prev arrow components, I think we can use style or className in customized arrow components. Please check following code.

const settings = {
  ...
  prevArrow: <Arrow style={{ display: "block", background: "red" }} />
};

Please check customArrows example on react-slick document