Ability to augment style of certain elements

[tgallacher]

Summary

Hey! 👋

Lovely lib 💪

As some of the prop getters include some minimal style settings for the relevant carousel element(s), it would be amazing if this could be extended.

For example, in some situations I would like to expand this style to customise certain aspects of the layout/design, etc. In order to avoid adding extra HTML markup to offer styling points -- which can actually break some layouts -- it would be great if the prop getters supported a style object as part of the input arg.

For example (using the README example):

export const MyCarousel = () => {
  const items = new Array(10).fill(null).map((_, idx) => ({
    id: idx,
    name: `item number ${idx}`,
  }));

  const {
    getSectionProps,
    getHeadingProps,
    getCarouselWrapperProps,
    getCarouselProps,
    getCarouselItemProps,
    getButtonProps,
    getAnnouncerProps,
    state,
  } = usePony({ numItems: items.length });

  // some example CSS
  const itemStyle = {
    margin: '1rem 0',
    border: '1px solid blue',
  };
  const ulStyle = {
    margin: 0,
    padding: 0
  }

  return (
    <div {...getSectionProps()}>
      <h1 {...getHeadingProps()}>Heading</h1>
      <div {...getCarouselWrapperProps()}>
        <ul {...getCarouselProps(ulStyle)}>
          {items.map((item, idx) => (
            <li key={idx} {...getCarouselItemProps(idx, itemStyle)}>
              {item.name}
            </li>
          ))}
        </ul>
      </div>
      <button {...getButtonProps(ActionKind.Previous)}>Previous</button>
      <button {...getButtonProps(ActionKind.Next)}>Next</button>
      <div {...getAnnouncerProps()}>
        <p>{`Item ${state.activeSlideIndex + 1} of ${items.length}`}</p>
      </div>
    </div>
  );
};

and so on.

The following prop getters should support this style arg, as they return a minimal style prop:

• getCarouselWrapperProps
• getCarouselProps
• getCarouselItemProps
• getAnnouncerProps