React slick adding slick-list class to slick-arrow

[ghost]

Hi, this is my slider config:

slidesToShow: 4,
slidesToScroll: 4,
initialSlide: 0,
dots: false,
infinite: false,
responsive: [
  {
    breakpoint: BREAKPOINT_XL,
    settings: {
      dots: false
    }
  },
  {
    breakpoint: BREAKPOINT_LG,
    settings: {
      slidesToShow: 4,
      slidesToScroll: 4,
      dots: false
    }
  },
  {
    breakpoint: BREAKPOINT_MD,
    settings: {
      slidesToShow: 2,
      slidesToScroll: 2,
      dots: false
    }
  },
  {
    breakpoint: BREAKPOINT_SM,
    settings: {
      slidesToShow: 1,
      slidesToScroll: 1,
      dots: false
    }
  }
]

I am using custom arrows for slider:

export const NextArrowCustom = props => {
  const { className, onClick } = props;
  return (
    <StyledCustomArrow className={className} onClick={onClick}>
      <StyledArrowIcon className="nc-ic_keyboard_arrow_right_48px" />
    </StyledCustomArrow>
  );
};

On smallest breakpoint for unknown reason react-slick id adding slick-list class to arrow component. When there is more then 4 items in slider it works as expected.

Thanks.

[avkvak]

same problem here. My config contains following:

  nextArrow: <CardSliderArrow />,
  prevArrow: <CardSliderArrow />,

CardSliderArrow:

const CardSliderArrow = ({ onClick }) => {
  return (
    <CardSliderArrowStyled {...{ onClick }}>
      Arrow Here
    </CardSliderArrowStyled>
  );
};

but I finally Ive got these: https://cl.ly/51b9787b94d8

highlighted line is an buggy arrow

[StevenGastroSophy]

try to replace the first tag of arrow with "non-div" tag. it would be just fine~