How to add className to next and previous div in React slick carousel

Question

   const BeerSlider = () => {
        const settings = {
            className: 'center',
            dots: true,
            infinite: true,
            speed: 500,
            focusOnSelect: true,
            slidesToShow: 3,
            centerMode: true,
            slidesToScroll: 1,
            centerPadding: '230px',
            onInit: () => {
 ```add class prev and next slick slide ```
               
            }
    
        }

Answer 1

You can actually replace the next and previous arrow icons come default. I think that would be better than adding styles to existing CSS classes.

1st way

Add more CSS properties for the existing CSS class

.slick-arrow.slick-next {
     // your styles
     ...
     ...
}

.slick-arrow.slick-prev {
     // your styles
     ...
     ...
}

2nd way

Add custom next and previous buttons

const settings = {
    className: "center",
    dots: true,
    infinite: true,
    speed: 500,
    focusOnSelect: true,
    slidesToShow: 3,
    centerMode: true,
    slidesToScroll: 1,
    centerPadding: "230px",
    nextArrow: <RightNavButton />,
    prevArrow: <LeftNavButton />
};

function LeftNavButton(props) {
    const { className, style, onClick } = props;
    return (
        <div
            className="slick-arrow"
            style={{ ...style, display: "block" }}
            onClick={onClick}
        >
            <div className="artilces-slider-left-arrow">
                {/* this is font awesome icons */}
                <i class="fas fa-angle-left"></i> 
            </div>
        </div>
    );
}

function RightNavButton(props) {
    const { className, style, onClick } = props;
    return (
        <div
            className="slick-arrow"
            style={{ ...style, display: "block" }}
            onClick={onClick}
        >
            <div className="artilces-slider-right-arrow">
                {/* this is font awesome icons */}
                <i class="fas fa-angle-right"></i>
            </div>
        </div>
    );
}