[v2] CSS class properties applied --item & --scroll-container element would be a great value

[korbav]

Correct me if I am wrong but according to my understanding, there doesn't seem to me there's any parameter or simple way to pass custom classes to be set on the following elements :

• .react-horizontal-scrolling-menu--item
• .react-horizontal-scrolling-menu--separator
• .react-horizontal-scrolling-menu--scroll-container

The only custom class that can be passed down right now is the one that is applied to the .react-horizontal-scrolling-menu--wrapper element with the use of the wrapperClassName property.

It's clearly possible to use the not-customizable classes mentioned above with their library-set names but it sounds sad :

• If the library is to be updated and anything had to change in the component's DOM, it will break any dependent CSS style (or even JS events), Indeed, the maintainer will be quite limited in the DOM implementation if such limits had to persist (being limited by preventing any breaking in the client's end side and having to keep the DOM as it is). On the other side, having customized classes passed down can guarantee the perennity of the inherent implementations.
• It more or less goes against the SOLID principles by increasing the coupling of the client's codebase to the library.

IMO, that's definitely a must-have. I'm opened to discuss it if wished.

[asmyshlyaev177]

Hi, ok, will consider adding custom classNames options.

[korbav]

Awesome, appreciated! 👍

[asmyshlyaev177]

Published 2.2.0, check it out.

[korbav]

Just gave a try. I'm ok with the implementation of scrollContainerClassName and separatorClassName which are, as expected, applied to the corresponding library elements .react-horizontal-scrolling-menu--scroll-container and .react-horizontal-scrolling-menu--separator.

According to what's been said above, one would expect itemClassName to be applied to .react-horizontal-scrolling-menu--item, which is not the case, it's currently being applied to a child .react-horizontal-scrolling-menu--item > div. IMO, that would make more sense (and give more freedom as well in the CSS) to stay aligned with the implementation of scrollContainerClassName and separatorClassName and to apply itemClassName directly to the .react-horizontal-scrolling-menu--item element.

[asmyshlyaev177]

ClassName applied to Item, not to child, item-test class in screenshot.

[korbav]

I'm sorry you're absolutely right, I was not looking at the right file.
That seems to work great! Thanks for the reactivity.