title: Workaround to add className to Fragment in React
body: <p>I am trying to create a stateless component in React with the sole purpose of acting as a reusable wrapper. I am also using CSS Modules because I want to have fully modular CSS.</p>
  
  <p>The thing is I don't want to add unnecessary elements (and even more so <code>&lt;div&gt;</code>s), but instead I want to use React's Fragments.</p>
  
  <p>Now, the problem I have is Fragment (at least for now) do not accept classNames. So if I try this:</p>
  
  <p>// In Wrapper.js:</p>
  
  <pre><code>import React, { Fragment } from 'react'
  import styles from './Wrapper.css'
  
  const wrapper = (props) =&gt; (
      &lt;Fragment className={styles.wrapper}&gt;
          {props.children}
      &lt;/Fragment&gt;
  )
  
  export default wrapper
  </code></pre>
  
  <p>In (for example) Navbar.js:</p>
  
  <pre><code>import React from 'react'
  import styles from './Navbar.css'
  import Wrapper from '../../Layout/Wrapper'
  
  const navBar = (props) =&gt; (
      &lt;nav className={styles.navBar}&gt;
          &lt;Wrapper&gt;
              This is the site's main navigation bar.
          &lt;/Wrapper&gt;
      &lt;/nav&gt;
  )
  
  export default navBar
  </code></pre>
  
  <p>Now I can of course, use a div instead of the Fragment, but is there any other workaround to avoid using unnecessary markup, of which I am totally unaware at this hour of the night? :)</p>
  
  <p>Thanks in advance for any insight, recommendation, correction, or any other form of help!</p>