//Parent
<MDXProvider
components={{
code(props: any): JSX.Element {
const [ref, setRef] = createSignal<HTMLPreElement | undefined>();
createEffect(async () => {
const current = ref();
const content = props.children;
if (current && content) {
const result = await codeToHtml(content, {
lang: 'typescript',
theme: 'vitesse-dark',
});
current.innerHTML = result;
}
});
return <div ref={setRef}></div>;
},
}}
>
{props.children}
</MDXProvider>// Child (Doesn't work) ❌
import Awesome from "./awesome.mdx"
// ...
return (
<Awesome />
)
// Child (Works) ✅
import Awesome from "./awesome.mdx"
// ...
// @ts-ignore (Also, there seems to be a bug on just Types for this atm, I can't get rid of the error unless I ts-ignore it)
const components = useMdxComponents();
return (
<Awesome components={components} />
)I think this should be part of the docs because I was more under the impression that if I had the context wrapped, I won't need to manually consume it. (Similar to this: https://stackoverflow.com/a/56636389/8622733). So I think it's important to note that it needs to be manually consumed.
Second, any solutions to the type error when using useMdxComponents()?
Version currently installed 1.1.4
I think this should be part of the docs because I was more under the impression that if I had the context wrapped, I won't need to manually consume it. (Similar to this: https://stackoverflow.com/a/56636389/8622733). So I think it's important to note that it needs to be manually consumed.
Second, any solutions to the type error when using
useMdxComponents()?Version currently installed
1.1.4