Automatic JSX runtime In Gatsby(with ts)

[zhaohuanyuu]

1. Currently in gatsby it is only possible to add comments at the top of files manually like this:?

theme-ui in gatsby doc

 /** @jsx jsx */

 import { jsx } from "theme-ui"

I configured these in tsconfig.json, but it doesn't work(not try babel-preset):

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "theme-ui"
  }
}

2. Is there a general solution to deal with sx prop not defined in the current element type in gatsby with typescript ?

import { Link } from "gatsby"
 
// sx prop doesn't match in GatsbyLinkProps...
// same on other reactElement
<Link
  sx={{
    // change gatsby link style
  }}
>this is a gatsby link</Link>

[hasparus]

You should be able to configure it in your Gatsby config.

https://www.gatsbyjs.com/docs/reference/release-notes/v4.1/#jsx-runtime-options-in-gatsby-configjs

[zhaohuanyuu]

Thanks, I didn't find this document before