Storybook: Are MDX component overrides still supported?

[alexpriceco]

Bug description

I'm unable to use MDX component overrides, described in theming.md.

To reproduce

Create some document.stories.mdx MDX document with a level 1 heading, then set preview.js to the following:

import react from "react";
import { addParameters } from '@storybook/react';

const newHeader = ({ children }) => (
  <h1 style={{ color: "red" }}>TEST {children}</h1>
);

addParameters({
  docs: {
    components: {
      h1: newHeader,
    }
  }
})

Expected behavior

All level 1 headers in MDX docs should have the word TEST before the content, and be red. This is not the case. It looks like the custom component isn't even being loaded.

System info

  System:
    OS: macOS 10.15.3
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 13.7.0 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.6 - /usr/local/bin/npm
  Browsers:
    Chrome: 80.0.3987.122
    Safari: 13.0.5
  npmPackages:
    @storybook/addon-actions: ^5.3.13 => 5.3.13 
    @storybook/addon-centered: ^5.3.12 => 5.3.13 
    @storybook/addon-docs: ^5.3.10 => 5.3.13 
    @storybook/addon-knobs: ^5.3.10 => 5.3.13 
    @storybook/react: 5.3.10 => 5.3.10 
    @storybook/theming: ^5.3.10 => 5.3.13 

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[alexpriceco]

Bumping to remove inactive label. Are there any questions / clarifications I can help with, or is there a better channel to ask this question?

[shilman]

sorry was looking into this and got distracted. i'll follow up.

[alexpriceco]

Thank you so much! I really appreciate you and the team’s efforts on Storybook. Absolutely no rush, and please stay safe in this difficult time.

On Mar 20, 2020, at 21:43, Michael Shilman [e-mail] wrote:


sorry was looking into this and got distracted. i'll follow up.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or unsubscribe.

[shilman]

I just tried it again in official-storybook and it seems to be working fine:

// eslint-disable-next-line react/prop-types
const NewHeader = ({ children }) => <h1 style={{ color: 'red' }}>TEST {children}</h1>;

addParameters({
  docs: {
    components: { h1: NewHeader },
  },
});

[Elanhant]

I've been experiencing the same issue, and it seems like it's happening in Documentation-only MDX, MDX with stories seems to be working fine.

Perhaps a related problem — docs theming is not applied to Documentation-only MDX, still works for other docs though.

[shilman]

@Elanhant thanks for the clue--very interesting... Can you try upgrading to 6.0-alpha? Both theming & component overrides seem to be working in next for me. Have not tried in master.

[Elanhant]

@Elanhant thanks for the clue--very interesting... Can you try upgrading to 6.0-alpha? Both theming & component overrides seem to be working in next for me. Have not tried in master.

Sorry, I should've mention that I am already on alpha 🙂 I've just tried upgrading to 6.0.0-alpha.28, still no luck.

I also remember that "page" parameter wasn't working for me either. It's as if doc-only MDX just skips all the theming and parameters, and goes straight to displaying plain MDX.

[shilman]

@Elanhant what are the filenames of your docs-only MDX files?

[Elanhant]

@Elanhant what are the filenames of your docs-only MDX files?

Intro.stories.mdx and About.stories.mdx. You can check them out here.

[shilman]

Thanks @Elanhant -- I'm able to repro in your repo. It's getting late here, but I'll dig in tomorrow and see if I can figure out what's going on. That's NOT expected behavior.

[shilman]

@Elanhant It's something wrong with your repo.

yarn why react
=> Found "[email protected]"
yarn why @emotion/core
=> Found "@emotion/[email protected]"

When I started, I found multiple versions of these libraries and aggressively removed stuff, esp. old version of @storybook/addon-info and react-storybook-addon-chapters, removed the lockfile, reinstalled, and generally stripped things down (FileUpload stopped building at some point, so I stripped it out). I also removed your workaround of <MdxDocsTheme /> to test.

In the end this is what I got working in preview.js:

const NewHeader = ({ children }) => (
  <h1 style={{ color: "red" }}>TEST {children}</h1>
)

export const parameters = {
  viewport: { viewports },
  docs: {
    components: { h1: NewHeader },
    theme: themes.dark,
  },
}

I didn't stop to figure out exactly which change fixed things, but if I had to guess, it would be that there were multiple copies of React and that a value was getting injected into one version's Context and then somehow unavailable in the other version.

[Elanhant]

@shilman thank you, much appreciated! I'll see if I can pinpoint the exact reason, the context thing does seem to be the most probable candidate.