Add className to root <div class="ais-Hits__root"> element

How can I add className(s) to the root element

?

If I try the classNames are omitted.

ais-Hits__root

I think you’re looking for the option cssClasses :

search.addWidget(
	instantsearch.widgets.hits({
		container: '#hits',
		hitsPerPage: 5,
		templates: {
			item: $('#hit-template').html(),
			empty: "We didn't find any results for the search <em>\"{{query}}\"</em>",
			//allItems: "" -- can not be use when item is set too
		},
		cssClasses: {
			root: "test-class second-test-classs",
            empty: "something",
            item: "something else"
		}
	})
);

in your instantsearch widget. Doc here for the hits widget but I believe it’s applicable to all of them.

Hi @ksmyth,

For now it’s not possible to add your own classnames using directly our widgets. There’s an open issue that you can follow here about styling. We’re currently working on it.

However you can still achieve what you want by using our connectHits connector instead of the <Hits> widget.

You will write something like:

<Product/>

const Product = connectHits(({hits, value}) => {
     const hits = hits.map(hit => ...);
     return <div className="MyRootClass">{hits}</div>
});