Using styles via css/props

[Johan Tinglöf]

I opened a separate issue for this since the documentation said to discuss if you needed to use the class prop.

My use case for className prop is to style different item width and scroll padding for items on different screen sizes. For me this is much preferred way over using screen width detection in javascript and sending different props. What do you think about this?

I do get if this was the case that the variables were used inside the scroll code somewhere but they seem to be accessed by style attribute anyway.

A suggestion would be to remove inline styles if they aren't set so the user can chose what to be used, the only example where I found inlines styles to be set without the prop was scroll-padding, so maybe remove that it defaults to 0 and pass undefined instead if no value is set? Whats your take on this?

[Luis Puig]

Hi,

I have been thinking about this use case. I usually use css-in-js and the responsive from the javascript side using useWindowSize but we should allow a way to do it from CSS with media-queries.

The warning about classnames is because overwriting some css rules could be dangerous, especially for the polyfill scenario. The library adds en removes some of them during the scrollTo process. Those are related to scroll- . I do not see a risk using the CSS to change the same css rules that the props are changing:

SnapItem:
  margin?: {
    top?: string;
    right?: string;
    bottom?: string;
    left?: string;
  };
  width?: string;
  height?: string;
  snapAlign: 'start' | 'center' | 'end' | 'none';

SnapList:
 padding?: {
    top?: string;
    right?: string;
    bottom?: string;
    left?: string;
  };
  width?: string;
  height?: string;

What do you think setting those rules by CSS instead of by prop?

[Johan Tinglöf]

Sorry I haven't had much time to think about code other than work lately.

"I have been thinking about this use case. I usually use css-in-js and the responsive from the javascript side using useWindowSize but we should allow a way to do it from CSS with media-queries." - Yeah, that makes totally sense if you are using css-in-js, I've been using this in a project where I don't and then having a listener for window change and having some of the css "in js" and some of it not is not preferable. I think one of the main benefits of this technique to have more of a "pure css" carousel as native snap is to be able to control it via css.

"What do you think setting those rules by CSS instead of by prop?"

With that said, I don't see any problem being able to set them as props, at least not if you can omit them and no inline styles appear (they can be very tedious to overstyle), then you could chose if you wanna do it the declarative way in the jsx or omit that and do it via css.

What are your thoughts on this?

[Luis Puig]

Sounds good, the only point is that some styles are created for internal use and others can be changed via props. As you pointed, some default values are set via inline CSS what makes it difficult to overwrite them.

I can manage a change to remove those default values in the CSS. Check https://github.com/luispuig/react-snaplist-carousel/tree/avoid-default-values-inline

But, you should set via CSS the same CSS props that the component will modify via props. Otherwise, you can break the behaviour. This way you will have full control over all the configuration options via CSS and media queries.

SnapList:

style={{
      width,
      height,
      scrollPaddingTop: scrollPadding?.top,
      scrollPaddingRight: scrollPadding?.right,
      scrollPaddingBottom: scrollPadding?.bottom,
      scrollPaddingLeft: scrollPadding?.left,
    }}

SnapItem:

style={{
      marginTop: margin?.top,
      marginRight: margin?.right,
      marginBottom: margin?.bottom,
      marginLeft: margin?.left,
      width,
      height,
    }}