Support className to make styled-components usage easier

[iam4x]

Feature: What is your use case for such a feature?

You can style directly third party components with styled-components this way:

import React from 'react';
import styled from 'styled-components';
import {Hits} from 'react-instantsearch';

const StyledHits = styled(Hits)`
  border: 1px solid black;
  background: red;

  .hit {
    display: block;
    border: 1px solid green;
  }
`;

[...]

return (
  <StyledHits 
       hitComponent={ ({name}) => <span className='hit'>{name}</span>) } 
  />
);

Feature: What is your proposed API entry? The new option to add? What is the behavior?

Every widget/component should accept className property for the root container.

What project are you opening an issue for?

• react-instantsearch

[vvo]

Would this also allow https://github.com/zeit/styled-jsx? Just wondering, I bet https://github.com/zeit/styled-jsx is right now mostly used in next.js websites.

[mthuret]

This is to allow the usage of styled-components with our widgets right (as opposed to connectors) ?

Using the classnames that are already defined is not working? (ex: .ais-Menu__root)

[iam4x]

@vvo I don't know, but I have a project with next.js where I can check.

@mthuret Right now either you create a custom component with the connector, or you have to add a container which wrap the react-instantsearch component:

import React from 'react';
import styled from 'styled-components';
import {Hits} from 'react-instantsearch';

const HitsContainer = styled.div`
  .ais-Hits__root {
    [ ... ]
  }
`;

render() {
  return (
    <HitsContainer>
      <Hits />
    <HitsContainer>
  )
}

If react-instantsearch accepted a className prop to be passed in combination of .ais-Hits__root it will reduce boilerplate code.

And it's a common usage for third party components to accept this className property, what do you think?

[mthuret]

React InstantSearch has been moved here: https://github.com/algolia/react-instantsearch
This issue has either been rewritten or placed inside our backlog.