fix(mdx): add .sx props to Themed.X styles

packages/mdx/src/index.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
-import { jsx, IntrinsicSxElements } from '@theme-ui/core'
-import { css, CSSObject, get, Theme } from '@theme-ui/css'
+import { jsx, IntrinsicSxElements, SxProp } from '@theme-ui/core'
+import { css, get, Theme } from '@theme-ui/css'
 import {
   ComponentType,
   FC,
@@ -88,16 +88,10 @@ export const themed =
   (key: ThemedComponentName | (string & {})) => (theme: Theme) =>
     css(get(theme, `styles.${key}`))(theme)
 
-// opt out of typechecking whenever `as` prop is used
-interface AnyComponentProps extends JSX.IntrinsicAttributes {
-  [key: string]: unknown
-}
-
 export interface ThemedComponent<Name extends string> {
   (
-    props: (Name extends keyof JSX.IntrinsicElements
-      ? ComponentProps<Name>
-      : {}) & { css?: CSSObject }
+    props: SxProp &
+      (Name extends keyof JSX.IntrinsicElements ? ComponentProps<Name> : {})
   ): JSX.Element
   displayName: string
 }
@@ -129,8 +123,6 @@ const createThemedComponent = <Name extends string>(
       if (align !== 'char') extraStyles.textAlign = align
     }
 
-    const css = (props as any)['css']
-
     return jsx(name, {
       ...props,
       css: [props.css, variantStyles, extraStyles].filter(Boolean),

packages/mdx/test/index.tsx

@@ -7,7 +7,6 @@ import React from 'react'
 import { mdx } from '@mdx-js/react'
 import { render } from '@testing-library/react'
 import { matchers } from '@emotion/jest'
-import mockConsole from 'jest-mock-console'
 import { ThemeProvider } from '@theme-ui/core'
 import { renderJSON } from '@theme-ui/test-utils'
 
@@ -47,6 +46,19 @@ test('styles React components', () => {
   expect(json).toHaveStyleRule('color', 'tomato')
 })
 
+test('Themed.div accepts .sx prop', async () => {
+  const tree = render(
+    <ThemeProvider theme={{ colors: { primary: 'blue' } }}>
+      <Themed.div sx={{ color: 'primary' }}>blue text</Themed.div>
+    </ThemeProvider>
+  )!
+
+  const div = await tree.findByText('blue text')
+  const style = global.getComputedStyle(div)
+
+  expect(style.color).toBe('blue')
+})
+
 test('themed extracts styles from the theme', () => {
   expect(
     themed('footer')({ styles: { footer: { background: 'skyblue' } } })