How to make styles for slick sliders so that they are not related to each other

Question

There are 2 sliders made with react slick.They are located in different jsx files, but in the same project. I need to change their css properties (more precisely, the margin between each element inside), I do this using the slick-slide class{margin:0px 6px 0px 0px }. But by applying the same class to another slider but different values, it turns out that they change for another slider too .

import React from 'react';
import "./Category.css";
import Slider from "react-slick";
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

const Category = ({nameCat,books}) => {
    const settings1 = {
        dots: false,
        infinite: false,
        speed: 500,
        slidesToShow: 2.5,
        slidesToScroll: 1,
        variableWidth: true 
    };
    return (
        <div className='category'>
            <div className='nameCateg'>
                {nameCat}
                <a href='/#' className='All'>Все</a>
            </div>
            <div className='sliderBooks'>
                <Slider {...settings1} className="sliderBooks" id="slider2">
                    {Object.entries(books).map(([key,value],book)=>(
                        <div key={book.key} className="CategoriesBook">
                            <div className='BookImage'>
                                <img src='' alt=''/>
                            </div>
                            <div className='BookData'>
                                <p className='nameBook'>{value.nameBook}</p>
                                <p className='author '>{value.author}</p>
                            </div>
                        </div>
                    ))}
                </Slider>
            </div>
        </div>
    );
};

export default Category;