editing slick-list class in react slick slider

Question

the problem is i use a couple reactSlick component in my react Apps, in home and the others is in team Page, i already customize in globall.css (nextjs) for the homepage, now i wanna change classes named .slick-list in tournament page that some how generated automatic using <Slider></Slider>

is theres any solution to change the class css, and the other page not include in it ? i wanna ad inline css but i cant found any explanation of .slick-list to edit it, instead of in global.css

my code is below :

    <Slider {...settings}>
  {sliderData.map((slide, index) => {
    return (
      <div
        className='TeamSlider'
        key={index}
        style={{ height: '185px !important' }}
      >
        <img src={slide.image} alt='slider' key={index} />
      </div>
    )
  })}
</Slider>

Answer 1

First of all, it is not recommended to write component specific css in global.css file. If you are familiar with react-jss or styled-component than you can do it easily. The idea is to give a className to slider component and select the insider class using class-selector way.

I will try to show you using react-jss.

import { createUseStyles } from "react-jss";

const useStyles = createUseStyles({
  sliderContainer: {
    "& .slick-list": {
      marginTop: "100px",
    },
  },
});

export const SomeComponent = () => {
  const classes = useStyles();
  const settings = {
    className: classes.sliderContainer,
  };
  return (
    <Slider {...settings}>
      {sliderData.map((slide, index) => {
        return (
          <div
            className="TeamSlider"
            key={index}
            style={{ height: "185px !important" }}
          >
            <img src={slide.image} alt="slider" key={index} />
          </div>
        );
      })}
    </Slider>
  );
};