# Customize style for paging component of Search UI **URL:** \ **Category:** Elastic Search\ **Tags:** elastic-site-search\ **Created:** [October 28, 2019, 7:59pm UTC](https://discuss.elastic.co/t/customize-style-for-paging-component-of-search-ui/205542 "2019-10-28T19:59:30Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![sarrame](https://avatars.discourse-cdn.com/v4/letter/s/b9e5f3/32.png) [@sarrame](https://discuss.elastic.co/u/sarrame)\ **Post date:** [October 28, 2019, 7:59pm UTC](https://discuss.elastic.co/t/customize-style-for-paging-component-of-search-ui/205542/1 "2019-10-28T19:59:31Z")
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](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 ! ---
**Author:** ![Vadim\_Yakhin](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/vadim_yakhin/32/56723_2.png) [@Vadim\_Yakhin](https://discuss.elastic.co/u/Vadim_Yakhin)\ **Post date:** [October 29, 2019, 6:52pm UTC](https://discuss.elastic.co/t/customize-style-for-paging-component-of-search-ui/205542/2 "2019-10-29T18:52:45Z")
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](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/](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](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](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. ---
**Author:** ![sarrame](https://avatars.discourse-cdn.com/v4/letter/s/b9e5f3/32.png) [@sarrame](https://discuss.elastic.co/u/sarrame)\ **Post date:** [October 29, 2019, 7:11pm UTC](https://discuss.elastic.co/t/customize-style-for-paging-component-of-search-ui/205542/3 "2019-10-29T19:11:33Z")
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 \ ( **{start} - {end}** )} /\> ---
**Author:** ![Vadim\_Yakhin](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/vadim_yakhin/32/56723_2.png) [@Vadim\_Yakhin](https://discuss.elastic.co/u/Vadim_Yakhin)\ **Post date:** [October 29, 2019, 7:41pm UTC](https://discuss.elastic.co/t/customize-style-for-paging-component-of-search-ui/205542/4 "2019-10-29T19:41:34Z")
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](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](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](https://github.com/elastic/search-ui/blob/master/packages/react-search-ui-views/src/Paging.js#L10-L13) ---
**Author:** ![sarrame](https://avatars.discourse-cdn.com/v4/letter/s/b9e5f3/32.png) [@sarrame](https://discuss.elastic.co/u/sarrame)\ **Post date:** [October 31, 2019, 7:57pm UTC](https://discuss.elastic.co/t/customize-style-for-paging-component-of-search-ui/205542/5 "2019-10-31T19:57:20Z")
Thanks Vadim 🙂 , I see what you say will try out and get back. ---
**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\ **Post date:** [December 3, 2019, 12:34am UTC](https://discuss.elastic.co/t/customize-style-for-paging-component-of-search-ui/205542/7 "2019-12-03T00:34:48Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.