MDXProvider not working as expected.

[adatoo]

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

@mdx-js/react v 3.0.1

Link to runnable example

https://codesandbox.io/p/devbox/mdxprovider-issue-gljjl9?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clv6q0h6m00073b6iivhnm4xk%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clv6q0h6l00023b6ihfy3d329%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clv6q0h6l00043b6ig9pv7cc1%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clv6q0h6l00063b6i4i10us1p%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clv6q0h6l00023b6ihfy3d329%2522%253A%257B%2522id%2522%253A%2522clv6q0h6l00023b6ihfy3d329%2522%252C%2522activeTabId%2522%253A%2522clv6q57xp007u3b6iaa8cxyou%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clv6q0h6l00013b6if4mafnbi%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Ftsconfig.node.json%2522%252C%2522id%2522%253A%2522clv6q57xp007u3b6iaa8cxyou%2522%252C%2522mode%2522%253A%2522temporary%2522%257D%255D%257D%252C%2522clv6q0h6l00063b6i4i10us1p%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clv6q0h6l00053b6iplecv33s%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clv6q0h6l00063b6i4i10us1p%2522%252C%2522activeTabId%2522%253A%2522clv6q0h6l00053b6iplecv33s%2522%257D%252C%2522clv6q0h6l00043b6ig9pv7cc1%2522%253A%257B%2522id%2522%253A%2522clv6q0h6l00043b6ig9pv7cc1%2522%252C%2522activeTabId%2522%253A%2522clv6q0pay00323b6irgcw0pwm%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clv6q0h6l00033b6iyosluh2a%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%252C%257B%2522id%2522%253A%2522clv6q0pay00323b6irgcw0pwm%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clv6q0pfn0038dhip2nrddkiv%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Steps to reproduce

Please see codesandbox link above.

Expected behavior

MDXProvider should enable styling of MDX components.

Actual behavior

MDXProvider does not apply component styling to Children

Runtime

Node v20

Package manager

pnpm

OS

Linux, macOS

Build and bundle tools

Vite

[ChristianMurphy]

Welcome @adatoo! 👋 Sorry you ran into confusion.

Two things which will help:

1. you don't need provider, passing in components directly is recommended
2. if you choose to use provider anyway, there is a guide on how to do that https://mdxjs.com/docs/using-mdx/#mdx-provider you need to set the provider import source, you have not

[adatoo]

Many thanks - all good.