The keen-slider__slide class of keen-slider not setting max and min-width properly?

Question

Here is my code:

import React from 'react'

import { useKeenSlider } from 'keen-slider/react'

// Styles
import 'keen-slider/keen-slider.min.css'

interface Props {
    children: any
}
// const animation = { duration: 20000, easing: (t: number) => t }
const Slider = ({ children }: Props) => {
    // Refs
    const [sliderRef] = useKeenSlider<HTMLDivElement>(
        {
            loop: true,
            slides: {
                perView: 4
            }
        },
        [
            (slider) => {
                let timeout: ReturnType<typeof setTimeout>
                let mouseOver = false
                function clearNextTimeout() {
                    clearTimeout(timeout)
                }
                function nextTimeout() {
                    clearTimeout(timeout)
                    if (mouseOver) return
                    timeout = setTimeout(() => {
                        slider.next()
                    }, 2000)
                }
                slider.on('created', () => {
                    slider.container.addEventListener('mouseover', () => {
                        mouseOver = true
                        clearNextTimeout()
                    })
                    slider.container.addEventListener('mouseout', () => {
                        mouseOver = false
                        nextTimeout()
                    })
                    nextTimeout()
                })
                slider.on('dragStarted', clearNextTimeout)
                slider.on('animationEnded', nextTimeout)
                slider.on('updated', nextTimeout)
            }
        ]
    )

    return (
        //   @ts-ignore
        <div ref={sliderRef} className='select-none keen-slider'>
            {React.Children.map(children, (child, i) => (
                <div
                    key={`featuredCape-${i}`}
                    className={`keen-slider__slide sm:h-300 sm:w-300 ${
                        i !== 0 ? '' : ''
                    }`}
                >
                    {child}
                </div>
            ))}
        </div>
    )
}

export default Slider

Here is what I am getting in console size In the keen-slider docs there was an option of setting the selection of size to null that this class is doing. When I did that it did made the size correct but but its giving an error

selector: null selector Error: This is the error after adding selector null

The size is now alright! size after adding selector null

Answer 1

I think that is because when you write {React.Children.map(children, (child, i) => () this does not pass classNames of the child element. So actually classNames that you are setting in child element will not be seen. you should add this logic to the div child.props.className ? ${child.props.className} : ""

         <div
                key={`featuredCape-${i}`}
                className={`keen-slider__slide sm:h-300 sm:w-300 
                          ${ i !== 0 ? '' : ''}
                          child.props.className ? `${child.props.className}` : ""

               ` }
            >
                {child}
            </div>