Customize style for paging component of Search UI

Elastic Search
1

Hello,
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 https://github.com/elastic/search-ui/blob/master/ADVANCED.md#component-views-and-html 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 !

2

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: https://github.com/elastic/search-ui/issues/276.

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: https://elastic.github.io/seattle-indies-expo-search/, and here's the place in code where custom styles are applied: https://github.com/elastic/seattle-indies-expo-search/blob/master/src/styles/vendor/_search-ui.scss#L336-L400

  2. Write your own Paging component by using low-level API: https://github.com/elastic/search-ui/blob/master/ADVANCED.md#headless-core.

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.

3

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
<PagingInfo
view={({ start, end }) => (



{start} - {end}


)}
/>
4

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: https://github.com/elastic/search-ui/tree/master/packages/react-search-ui-views/src and check what props the component accepts.

For example, for PagingInfo it's not only start and end, but also searchTerm and totalResults: https://github.com/elastic/search-ui/blob/master/packages/react-search-ui-views/src/PagingInfo.js#L8-L11

And for Paging that would be current (page), resultsPerPage, onChange and totalPages: https://github.com/elastic/search-ui/blob/master/packages/react-search-ui-views/src/Paging.js#L10-L13

5

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

7

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