Storybook: addon-docs: "escape-hatch" styling for MDX Blocks in DocPages

[mcpatten]

Is your feature request related to a problem? Please describe.
It is difficult to customize MDX/DocPage stories using the @storybook/theming setup [v5.2.4]. Customizing individual blocks is difficult, as they only render with minified/hashed css classnames.

Describe the solution you'd like
An intermediary solution similar to #8061 would be great in the short term.

Describe alternatives you've considered
Updating the ThemeVars interface seems like the more appropriate long-term solution, but I imagine this would be more complex of a change that could take a while to ship.

If you do have plans for an update on the theming implementation, it would be great to have something to work with in the meantime.

Are you able to assist bring the feature to reality?
With the appropriate guidance/support.

[github-actions[bot]]

Automention: Hey @ndelangen @patricklafrance, you've been tagged! Can you give a hand here?

[shilman]

This was an oversight in our escape hatching. Should be pretty easy to add -- anybody want to pick it up? cc @domyen

[domyen]

👍I support adding CSS escape hatches for further theming. A naming scheme like
className="sbdocs sbdocs-<docBlockName>" would be appropriate.

[Jeremie-Chauvel]

Interested in tackling this issue, I will look into it

[Jeremie-Chauvel]

Hi @shilman
I was able to cover most component with the exception of <Props>, the lib/components/src/blocks/PropsTable/PropsTable.tsx being difficult to update correctly.

That said, being unable to use yarn dev without running into the error Error: EMFILE: too many open files, makes for a long time debugging using yarn bootstrap --core + yarn start.

If I find how to reliably have a dev server for --core on storybook v5, I will wrap up the pr, else I can push part of the solution.

[shilman]

Hi @Jeremie-Chauvel that's great news! You should base off next which is v6. If you have that, you can run:

yarn build components addon-docs --watch

And it should be much more efficient than yarn dev thanks to @yannbf. If you edit other packages you can just add them to the list.