[Bug]: MDX styles not working with @storybook/mdx2-csf

[PaulieScanlon]

Describe the bug

Hi team, here's s small reproduction repo using the following:

• Node v18.0.0
• @storybook/mdx2-csf
• previewMdx2: true
• builder: '@storybook/builder-webpack5'

The introduction story does render but there's no font and code block / inline code block styling on elements created using markdown.

Here's s screen shot: Storybook + MDX 2

To Reproduce

- Clone the reproduction repo: [reproduction-storybook-gatsby-5-mdx-2](https://github.com/PaulieScanlon/reproduction-storybook-gatsby-5-mdx-2)
- Install dependancies `yarn`
- Start Storybook, `yarn storybook`

System

System:
    OS: macOS 11.6.8
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
  Binaries:
    Node: 18.0.0 - ~/.nvm/versions/node/v18.0.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.6.0 - ~/.nvm/versions/node/v18.0.0/bin/npm
  Browsers:
    Chrome: 107.0.5304.110
    Firefox: 105.0.3
    Safari: 15.6.1
  npmPackages:
    @storybook/addon-actions: ^6.5.13 => 6.5.13
    @storybook/addon-essentials: ^6.5.13 => 6.5.13
    @storybook/addon-interactions: ^6.5.13 => 6.5.13
    @storybook/addon-links: ^6.5.13 => 6.5.13
    @storybook/builder-webpack5: ^6.5.13 => 6.5.13
    @storybook/manager-webpack5: ^6.5.13 => 6.5.13
    @storybook/mdx2-csf: ^0.0.3 => 0.0.3
    @storybook/react: ^6.5.13 => 6.5.13
    @storybook/testing-library: ^0.0.13 => 0.0.13

Additional context

n/a, but I think you all are great!

[jabrks]

I had this problem. It turned out to be because @storybook/addon-docs was still importing the <MDXProvider /> from @mdx-js/react@1. I used npm overrides to force it to use @mdx-js/react@2 instead which fixed it.

[shilman]

Please try upgrading to the latest prerelease of 7.0, which upgrades fully to MDX2.

Migration guide: https://storybook.js.org/migration-guides/7.0