title: Add class names to React root component or change structure
body: <p>I am trying to use flexbox with a React component but a root div is being inserted. I can't add class names to the root div (omitted).</p>
  
  <p>I think it could be split out into smaller components but I am not sure how?</p>
  
  <p>This is how the structure is now:</p>
  
  <p><a href="https://i.stack.imgur.com/i9DYR.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i9DYR.jpg" alt="enter image description here"></a></p>
  
  <p>This is how I would like the structure:</p>
  
  <p><a href="https://i.stack.imgur.com/cbNcO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cbNcO.jpg" alt="enter image description here"></a></p>
  
  <p>Current (trimmed down) App.js code:</p>
  
  <pre><code>const Hit = ({hit}) =&gt;
    &lt;div className="col-xl-3 col-lg-4 col-md-6 col-sm-12 d-flex align-items-stretch var-result"&gt;
      &lt;div className="card"&gt;
        &lt;div className="card-block"&gt;
          &lt;div className="row flex-wrap"&gt;
              &lt;div className="col-md-8"&gt;&lt;h4&gt;&lt;Highlight attributeName="name" hit={hit}/&gt;&lt;/h4&gt;&lt;/div&gt;
              &lt;div className="col-md-4 text-right"&gt;
                &lt;img src={hit.image} className="img-fluid" alt=""/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;p className="d-inline-block db-name"&gt;Database name&lt;/p&gt;
          &lt;p className="d-inline-block vendor-name"&gt;${hit.price}&lt;/p&gt;
          &lt;p className="card-text small"&gt;&lt;Highlight attributeName="description" hit={hit}/&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  const SearchResultContent = () =&gt;
    &lt;section className="row grey-bg mt-5 overflow-y"&gt;
      &lt;Hits hitComponent={Hit} className="d-flex flex-wrap"/&gt;
    &lt;/section&gt;
  
  
  class App extends Component {
    render() {
      return (
        &lt;InstantSearch
          appId="latency"
          apiKey="3d9875e51fbd20c7754e65422f7ce5e1"
          indexName="bestbuy"&gt;
  
          &lt;HeaderNav /&gt;
          &lt;div className="container-fluid"&gt;
            &lt;div className="row"&gt;
              &lt;SideBar/&gt;
              &lt;Main/&gt;
              &lt;SearchResultContent/&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/InstantSearch&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>The classNames that are not added to the inserted root element.</p>
  
  <pre><code>&lt;Hits hitComponent={Hit} className="d-flex flex-wrap"/&gt;
  </code></pre>