Theme-ui: How to use React fragments?

[dburles]

Using just the pragma results in a build failure in a ReferenceError, "React is not defined". However, importing React triggers the eslint no-unused-vars rule.

/** @jsx jsx */
// import React from 'react';
import { jsx } from 'theme-ui'
import Button from './Button'

const Page = props => {
  return (
    <>
      <Button>Hello</Button>
    </>
  )
}

export default Page

Reproduction: https://codesandbox.io/s/theme-ui-starter-tdy3y

[jxnblk]

You'll need to import React to use fragments. If your linter is complaining, either disable it with a comment or you can use <React.Fragment> instead of the shorthand

[dburles]

I wondered if that was the case. Found a related issue here https://github.com/emotion-js/emotion/issues/1156 though there doesn't seem to be a nice resolve. Will leave for now, thanks.