Sortby widget dropdown styling

Hi, I was wondering if there is a way to style the dropdown menu of sortby widget in instantsearch. I assume it can be done with connectSortBy. But I was wondering if I can modify some existing classes to achieve my goal. I just to want to add a button on the left for each item and select by that, change the border, add margin & change color. Thanks!

Hi,
To customise the rendering of the sortBy widget you can use connectSortBy as you mentioned.

As written in the documentation, you can override 3 classes:

  • root : the root element of the widget.
  • select : the select element.
  • option : the option elements of the select .

But knowing what you want to do maybe using connectSortBy would be a better fit.

Let me know if you have other questions.

Hi Sophie, thanks for the confirmation. Is there any demo or blog that shows the development of these connect objects hands-on?

There’s an example in this section of the docs, not sure if you’ve seen it? https://www.algolia.com/doc/api-reference/widgets/sort-by/js/#create-a-render-function