search

akiran / react-slick

React carousel component
http://react-slick.neostack.com/
MIT License
11.76k stars 2.11k forks source link

Arrows elements are polluted #2051

Open AgainPsychoX opened 3 years ago

AgainPsychoX commented 3 years ago

Problem

When using arrows (arrows: true), elements used in nextArrow and prevArrow are polluted. Their className is changed entirely. Used Chrome DevTools to check the class list.

Expected behaviour

Either: a) embed the passed element in some div or b) make the library append required classes (slick-arrow, slick-next) instead overwriting whole class list (the same would be with other fields possibly(?)). c) add nextArrowClassName/rightArrowClassName (but its stupid tbh)

Example code

https://codesandbox.io/s/react-slick-playground-forked-lew3o?file=/index.js The example code includes part of https://react-slick.neostack.com/docs/example/custom-arrows .

Workaround

Embed the passed element in dummy div. By the way, React Fragment won't do ('<></>`).

Tags: [Not critical], [Quality of Life]

AgainPsychoX commented 3 years ago

Also, there are warnings/errors from React while using custom arrows: See https://github.com/akiran/react-slick/issues/1238#issuecomment-872816250