diff --git a/examples/with-mdx/src/pages/index.mdx b/examples/with-mdx/src/pages/index.mdx
index 84c9cc5fd4..f264df5221 100644
--- a/examples/with-mdx/src/pages/index.mdx
+++ b/examples/with-mdx/src/pages/index.mdx
@@ -15,3 +15,7 @@ Written by: {new Intl.ListFormat('en').format(authors.map(d => d.name))}.
 Published on: {new Intl.DateTimeFormat('en', {dateStyle: 'long'}).format(published)}.
 
 <Counter client:idle>This is a **counter**!</Counter>
+
+```js
+export const code = true
+```
diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts
index a1c47fa3e0..d3a31bf6b0 100644
--- a/packages/astro/src/runtime/server/index.ts
+++ b/packages/astro/src/runtime/server/index.ts
@@ -575,6 +575,16 @@ Make sure to use the static attribute syntax (\`${key}={value}\`) instead of the
 		return markHTMLString(` ${key.slice(0, -5)}="${listValue}"`);
 	}
 
+	// support object styles for better JSX compat
+	if (key === 'style' && typeof value === 'object') {
+		return markHTMLString(` ${key}="${toStyleString(value)}"`);
+	}
+
+	// support `className` for better JSX compat
+	if (key === 'className') {
+		return markHTMLString(` class="${toAttributeString(value, shouldEscape)}"`);
+	}
+
 	// Boolean values only need the key
 	if (value === true && (key.startsWith('data-') || htmlBooleanAttributes.test(key))) {
 		return markHTMLString(` ${key}`);