Customize style for paging component of Search UI

I am using Site Search with SearchUI and I want to create a custom styles for react-search-ui component. I went over the documentation this looks like letting you modify the onChange, but i looking to have custom styling.
for example, I want different styles and different arrows to be used. I am using styled-components.
Please help !

Hello @sarrame!

I tried to change the styling of the Paging component using styled-components, but I couldn't make it work because of this issue:

We're planning to fix it soon, but in the meantime, I can suggest 2 workarounds:

  1. Change component styles without the use of styled-components. Here's a demo of Search UI with custom styling:, and here's the place in code where custom styles are applied:

  2. Write your own Paging component by using low-level API:

I would suggest going with option 1 because it's easier, but since you want to also have different arrows, I guess option 2 is a way to go.

I hope that helps.

Thanks Vadim for the workarounds, I totally agree option 1 is easier, it needs a little more work on my source code which i will start doing it .
Meantime, as you said in option 2, i went through the Headless-core and I found PagingInfo had customization options, but i couldn't find one for Paging,

What are the props which i need to pass in order to customize the Paging.
Example on PagingInfo
view={({ start, end }) => (

{start} - {end}


The best way to find a list of props that you can use in view component is to find the component in react-search-ui-view package here: and check what props the component accepts.

For example, for PagingInfo it's not only start and end, but also searchTerm and totalResults:

And for Paging that would be current (page), resultsPerPage, onChange and totalPages:

Thanks Vadim :slight_smile: , I see what you say will try out and get back.

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.