-
-
- Recipes
-
- {' / '}
-
{props.name}
+export default function RecipeLink(props) {
+ return (
+
+
+ t.styles.a} to="/recipes">
+ Recipes
+
+ {' / '}
+ {props.name}
+
+ {props.children}
- {props.children}
-
-)
+ )
+}
diff --git a/packages/mdx/src/index.tsx b/packages/mdx/src/index.tsx
index 9ea7093fb..e5f3445c5 100644
--- a/packages/mdx/src/index.tsx
+++ b/packages/mdx/src/index.tsx
@@ -107,23 +107,9 @@ interface AnyComponentProps extends JSX.IntrinsicAttributes {
[key: string]: unknown
}
-export type WithPoorAsProp<
- Props,
- As extends ElementType | undefined = undefined
-> = {
- as?: As
-} & (undefined extends As
- ? As extends undefined
- ? Props
- : AnyComponentProps
- : AnyComponentProps)
-
export interface ThemedComponent
{
- (
- props: WithPoorAsProp<
- Name extends keyof JSX.IntrinsicElements ? ComponentProps : {},
- As
- >
+ (
+ props: Name extends keyof JSX.IntrinsicElements ? ComponentProps : {}
): JSX.Element
}
@@ -142,7 +128,6 @@ const createThemedComponent = (
const variantStyles = themed(variant)
return (props) => {
- // todo: handle `as` prop or deprecate it on Themed.X?
const css = (props as any)['css']
return jsx(name, {
diff --git a/packages/mdx/test/index.tsx b/packages/mdx/test/index.tsx
index e2261577e..1501a5032 100644
--- a/packages/mdx/test/index.tsx
+++ b/packages/mdx/test/index.tsx
@@ -45,38 +45,6 @@ test('styles React components', () => {
expect(json).toHaveStyleRule('color', 'tomato')
})
-test('components accept an `as` prop', () => {
- const Beep = (props: React.ComponentPropsWithoutRef<'h2'>) => (
-
- )
- const json = renderJSON(
-
-
- Beep boop
-
-
- )!
- expect(json.type).toBe('h2')
- expect(json).toHaveStyleRule('color', 'tomato')
-})
-
-test('components with `as` prop receive all props', () => {
- const Beep = (props: React.ComponentPropsWithoutRef<'div'>) => (
-
- )
- const json = renderJSON()!
- expect(json.type).toBe('div')
- expect(json.props.activeClassName).toBe('active')
-})
-
test('cleans up style props', () => {
const json = renderJSON(
// @ts-expect-error