How do I style the dots at the bottom?

[sanishkr]

I am trying to use renderPagination, but I will have to pass a whole new component.
I only want to change the styles of the dots at the bottom. Any way to do that or can you introduce new props?

[sag1v]

Quoting from #23

Most if not all containers and elements has a public CSS class that exposed to the consumer, so you can override or add any styling you like.

In this case you can use the rec-pagination and rec-dot class names.

[sanishkr]

Thanks for the response. If I apply styles to those public classes, inline critical css will not be generated for it which is an important requirement for my project.

For styled-components declared css, critcal css is automatically generated.
For now, I am trying a different approach for both issues #23 and #22

[sag1v]

Not sure i understand your issue, can you post an example in codesandbox?

[ec2ainun]

any update? @sag1v
https://sag1v.github.io/react-elastic-carousel/renderPagination
perhaps, you can give an example, how Square component styled

[sag1v]

any update? @sag1v
https://sag1v.github.io/react-elastic-carousel/renderPagination
perhaps, you can give an example, how Square component styled

Its just a component, you can render anything and style it as you wish.

[ec2ainun]

any update? @sag1v
https://sag1v.github.io/react-elastic-carousel/renderPagination
perhaps, you can give an example, how Square component styled

Its just a component, you can render anything and style it as you wish.

yeah i know, but i don't know how to style the dots at the bottom while its inactive or active
that why, detailed how to customized the dot at the bottom or provided Square styled component example, will make it clear for us to implement custom style @sag1v

[sag1v]

You can use the classes .rec-dot and .rec-dot_active to change the style of the dots:

.rec.rec-dot {
  background: #ff4343;
  border: 2px #333 solid;
  border-radius: 0;
}
.rec.rec-dot_active {
  background: #59fd59;
}

see a sandbox example

[ec2ainun]

thanks its work! @sag1v
but is it possible implementing it using styled component instead?

[sag1v]

@ec2ainun When you use styled-components you are not passing a class name but creating the actual component.

The example of renderPagination in the docs show this exact case. In this example the Square component is created using styled-components.