Can't override the dots width

[Totara-thib]

Bugs and Questions

First of all thank you for your amazing tools.

Prerequisites

• [x] I've searched open issues to make sure I'm not opening a duplicate issue
• [x] I have read through the docs before asking a question
• [x] I am using the latest version of nuka-carousel

Describe Your Environment

• What version of nuka-carousel are you using? 5.3.0
• What version of React are you using? 17.0.2
• What browser are you using? Firefox

Describe the Problem

When trying to override the dots style it only override the container of the dot so we can't change the width and height

<Carousel
  wrapAround
  cellSpacing={0}
  slidesToShow={itemsToShow}
  autoplay
  autoplayInterval={5000}
  defaultControlsConfig={{
    pagingDotsStyle: { fill: '#076E81', width: '12px', height: '12px' },
    pagingDotsClassName: 'w-12 h-12 ',
    pagingDotsContainerClassName: 'w-max flex justify-evenly bottom-0',
    nextButtonClassName: 'hidden',
    prevButtonClassName: 'hidden',
  }}
>
  {items.map((item) => {
    return returnCard(item);
  })}
</Carousel>

Expected behavior:

Expect to be able to override the dots width or the ability to insert my own svg.

Actual behavior

Overriding the width only apply the changes on the parent container of the dots since dots width and height are already defined we can't control it from the parent

[fritz-c]

You can use a CSS transform to scale it up for now. We might look into making it a bit more flexible by default. https://codesandbox.io/s/big-paging-dots-example-nuka-carousel-ruhsqd?file=/src/styles.css

[fritz-c]

This would seem to fix it in the source:

diff --git a/packages/nuka/src/default-controls.tsx b/packages/nuka/src/default-controls.tsx
index 4209035..a15fc16 100644
--- a/packages/nuka/src/default-controls.tsx
+++ b/packages/nuka/src/default-controls.tsx
@@ -289,6 +289,7 @@ export const PagingDots = (props: ControlProps) => {
                 height="6"
                 aria-hidden="true"
                 focusable="false"
+                viewBox="0 0 6 6"
               >
                 <circle cx="3" cy="3" r="3" />
               </svg>