Is using a theme with components rendered in MDX files possible?

[aldrichdev]

Summary

If I render a basic MUI component in an .mdx file like this:

<Typography variant='displaySmDesktop'>Try Me</Typography>

Where Typography is Material UI's component and displaySmDesktop is a custom typography defined in my theme that works outside of .mdx files..

Is it expected that none of the typography styles are applied? That is the behavior I am seeing.

I have the same problem if I render a custom component in an .mdx file, except in that case, when I try to access a custom property of the theme, it is undefined. However, if the component is called from a story, then it works.

It looks like the only way I can render a component is to use a Canvas, but with this approach there are two significant issues:

1. I cannot pass data to a Canvas, I can only have it execute a pre-defined story, therefore I need to set up stories for everything I want in advance. If I want a heading that is styled using a custom typography in my theme, that's a different story for every possible heading in a document! (I could use basic CSS, but I am trying to use a custom typography as it uses style tokens.)
2. In my recent experience, having more than a few canvases on an .mdx page seems to make those canvases load very slowly, specifically when you switch from one theme to another in the switcher (fonts load VERY slowly). I do not think documentation pages were intended to have 30+ canvases on a single page?

I think the issue is probably that .mdx files do not use preview.tsx like stories do, so my ThemeProvider wrapper isn't getting applied, therefore no theme context?

Additional information

I am using MUI themes and Emotion.

Storybook version: 7.2.3

main.ts

import type { StorybookConfig } from '@storybook/react-webpack5';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
    '@storybook/addon-interactions',
    '@storybook/addon-docs',
    'storybook-dark-mode',
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: prop => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
  docs: {
    autodocs: 'tag',
  },
  staticDirs: ['../public'],
  webpackFinal: async config => {
    config.module?.rules?.push({
      test: /\.(ts|tsx)$/,
      loader: require.resolve('babel-loader'),
      options: {
        presets: [require.resolve('@emotion/babel-preset-css-prop')],
      },
    });
    return config;
  },
};

export default config;

This question may be a duplicate of #17190, I am not really sure. That question has gone unanswered for almost 2 years and there was no way for me to bump it, so I created a new question.

Create a reproduction

No response

[SeanCox]

Things I found while researching this problem:

• fileName.mdx files seem to be using the default MUI theme and not using the custom defined one in preview.js

• fileName.story.mdx does not load any MUI theme at all

• fileName.stories.tsx loads the custom MUI theme correctly

• if you wrap you .mdx code with ThemeProvider theme={customTheme}> it works but you wont bee able to toggle between light and dark modes

• The<Story /> and <Canvas /> components render the custom theme correctly

[jsenosiain-cnc]

I am also experiencing this issue. Has there been any traction?

[MWhite-22]

I was able to finally find this little tidbit on the autodocs page https://storybook.js.org/docs/writing-docs/autodocs#customize-the-docs-container

This is working as expected for me in all pages, autodocs and custom MDX