Unable to use style props in mdx (gatsby)

[ftes]

Input

// gatsby-config.js
...
plugins: [
  `gatsby-plugin-mdx`,
  `gatsby-plugin-reflexjs`,
]

<!-- src/pages/index.mdx -->
<div bg="red">Hello world!</div>

Output

<div class="css-0">Hello world!</div>

The bg style prop is ignored. No CSS class with background-color: red is added to the rendered div.

Expected output

The style prop should be applied via a generated CSS class.

Remarks

Can I override the jsx pragma used by gatsby-plugin-mdx with reflexs.jsx?

[shadcn]

The style props are not enabled by default for MDX.

You can pass Box (import { Box } from "reflexjs"} to MDX component and use this for styling.

Can I override the jsx pragma used by gatsby-plugin-mdx with reflexs.jsx?

This should work too.

[ftes]

Can I override the jsx pragma used by gatsby-plugin-mdx with reflexs.jsx?

This should work too.

Have you done this before by any chance?