Addon-docs: classNames overwritten in inline MDX stories

When using MDX docs, any classNames on markup written within a <Story> is getting converted into a small hashed name.

To Reproduce

<Story name="theme">
    <h1 className="text-lg">Hello Hugh</h1>
</Story>

Expected behavior The output should be:

<h1 class="text-lg">Hello Hugh</h1>

Actual output

<h1 className="sbdocs-h1 css-zj4ng8">Hello Hugh</h1>

Screenshots If applicable, add screenshots to help explain your problem.

System: System: OS: macOS 10.14.6 CPU: (8) x64 Intel® Core™ i7-6820HQ CPU @ 2.70GHz Binaries: Node: 12.6.0 - ~/.nvm/versions/node/v12.6.0/bin/node Yarn: 1.17.3 - /usr/local/bin/yarn npm: 6.11.2 - ~/.nvm/versions/node/v12.6.0/bin/npm Browsers: Chrome: 76.0.3809.132 Firefox: 68.0.2 Safari: 12.1.2 npmPackages: @storybook/addon-a11y: ^5.2.0-rc.2 => 5.2.0-rc.2 @storybook/addon-actions: ^5.2.0-rc.2 => 5.2.0-rc.2 @storybook/addon-docs: ^5.2.0-rc.2 => 5.2.0-rc.2 @storybook/addon-knobs: ^5.2.0-rc.2 => 5.2.0-rc.2 @storybook/addon-storyshots: 5.2.0-rc.2 => 5.2.0-rc.2 @storybook/addon-storyshots-puppeteer: 5.2.0-rc.2 => 5.2.0-rc.2 @storybook/addon-storysource: ^5.2.0-rc.2 => 5.2.0-rc.2 @storybook/addons: ^5.2.0-rc.2 => 5.2.0-rc.2 @storybook/react: ^5.2.0-rc.2 => 5.2.0-rc.2 @storybook/source-loader: ^5.2.0-rc.2 => 5.2.0-rc.2

[adamduncan]

Hey, just circling back on this one. Is the prerequisite here that in order to avoid JSX classNames being hashed, we’ll need to wrap components etc. within a <Story> when writing MDX?

I’d like to write certain pages in “Docs mode” and just render the MDX, as opposed to a series of stories. Although I’m not sure I can add any markup with className in there without them being obfuscated?

[shilman]

Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-rc.4 containing PR #7974 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there’s still more to do.