sx prop isn't working where as style prop works perfectly fine

[deadcoder0904]

I have a Next.js + TS project with Theme UI with the following folder structure:

.
├── README.md
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── prettier.config.js
├── public
│   └── fonts
│       ├── Inter-italic.var-latin.woff2
│       ├── Inter-italic.var.woff2
│       ├── Inter-roman.var-latin.woff2
│       └── Inter-roman.var.woff2
├── src
│   ├── components
│   │   ├── Layout.tsx
│   │   └── mdx
│   │       ├── H1.tsx
│   │       └── index.ts
│   ├── config
│   │   └── theme.ts
│   ├── declaration.d.ts
│   └── pages
│       ├── _app.tsx
│       ├── _document.tsx
│       ├── about.tsx
│       ├── blogs
│       │   └── hello-world
│       │       └── index.mdx
│       ├── hello.mdx
│       ├── index.tsx
└── tsconfig.json

And I have a MDX file as follows:

src/pages/hello.mdx

# Hello

This is the world

This is my _app.tsx file:

src/pages/_app.tsx

import React from 'react'
import { MDXComponents } from '@/components/mdx'
import { AppProps } from 'next/app'
import { ThemeProvider } from '@theme-ui/theme-provider'
import { theme } from '../config/theme'

const MyApp = ({ Component, pageProps }: AppProps) => {
	return (
		<ThemeProvider theme={theme} components={MDXComponents}>
			<Component {...pageProps} />
			.
			.
			.
			<GlobalStyles />
		</ThemeProvider>
	)
}

export default MyApp

This is the file where I export MDXComponents from:

src/components/mdx/index.ts

import { H1 } from './H1'

export const MDXComponents = {
	h1: H1,
}

And finally my H1 component:

src/components/mdx/H1.tsx

import { HTMLAttributes } from 'react'

export const H1 = (props: HTMLAttributes<HTMLHeadingElement>) => (
  <h1 style={{ color: 'tomato' }} {...props} />
)

The Hello printed on the screen (see hello.mdx above) is in tomato color thanks to the above H1 component.

But if I change the H1 component to:

src/components/mdx/H1.tsx

/** @jsx jsx */
import { jsx } from '@theme-ui/core'
import { HTMLAttributes } from 'react'

export const H1 = (props: HTMLAttributes<HTMLHeadingElement>) => (
	<h1 sx={{ color: 'tomato' }} {...props} />
)

It doesn't work. It shows the default from theme.

My theme.ts looks like:

src/config/theme.ts

import { Theme } from '@theme-ui/css'

export const theme: Theme = {
	breakpoints: ['640px', '768px', '1024px', '1280px'],
	space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
	fonts: {
		body:
			"system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
		heading: "'Inter var', Georgia, Cambria, 'Times New Roman', Times, serif",
		monospace: "Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
	},
	fontSizes: [12, 14, 16, 20, 24, 32, 48, 64],
	fontWeights: {
		body: 400,
		heading: 700,
		bold: 700,
	},
	lineHeights: {
		body: 1.5,
		heading: 1.125,
	},
	letterSpacings: {
		body: 'normal',
		caps: '0.2em',
	},
	colors: {
		text: '#000000',
		background: '#ffffff',
		primary: '#87EAF2',
		secondary: '#F0F4F8',
		accent: '#F29B9B',
		highlight: '#F7D070',
		muted: '#BED0F7',
	},
	text: {
		heading: {
			fontFamily: 'heading',
			lineHeight: 'heading',
			fontWeight: 'heading',
		},
	},
	styles: {
		root: {
			fontFamily: 'body',
			lineHeight: 'body',
			fontWeight: 'body',
		},
		h1: {
			variant: 'text.heading',
			fontSize: 5,
			color: 'primary',
		},
		h2: {
			variant: 'text.heading',
			fontSize: 4,
		},
		h3: {
			variant: 'text.heading',
			fontSize: 3,
		},
		h4: {
			variant: 'text.heading',
			fontSize: 2,
		},
		h5: {
			variant: 'text.heading',
			fontSize: 1,
		},
		h6: {
			variant: 'text.heading',
			fontSize: 0,
		},
		pre: {
			fontFamily: 'monospace',
			overflowX: 'auto',
			code: {
				color: 'inherit',
			},
		},
		code: {
			fontFamily: 'monospace',
			fontSize: 'inherit',
		},
		table: {
			width: '100%',
			borderCollapse: 'separate',
			borderSpacing: 0,
		},
		th: {
			textAlign: 'left',
			borderBottomStyle: 'solid',
		},
		td: {
			textAlign: 'left',
			borderBottomStyle: 'solid',
		},
	},
}

I don't see any problem. Any ideas what I am doing wrong?

[deadcoder0904]

I changed my H1.tsx to the following:

/** @jsx jsx */
import { jsx } from '@theme-ui/core'
import { HTMLAttributes } from 'react'

export const H1 = (props: HTMLAttributes<HTMLHeadingElement>) => (
	<h1 sx={{ color: 'tomato', margin: '4rem' }} {...props} />
)

Added margin of 4rem & it shows.

I just saw the generated CSS in Devtools & it looks like:

css-48v1qb {
	𝚌̶𝚘̶𝚕̶𝚘̶𝚛̶:̶ ̶𝚝̶𝚘̶𝚖̶𝚊̶𝚝̶𝚘̶;̶
	margin: 4rem;
	font-family: 'Inter var',Georgia,Cambria,'Times New Roman',Times,serif;
	line-height: 1.125;
	font-weight: 700;
	font-size: 32px;
	color: var(--theme-ui-colors-primary,#87EAF2);
}

Is this an error?