Component styles are leaking into the Storybook UI

[kaiyoma]

Describe the bug
Some error messages displayed inside the Storybook UI are hard to read because they're rendered as white text on a gray background.

To Reproduce
Write a story that is missing a Redux provider and load that story in the UI.

System

Environment Info:

  System:
    OS: Windows 10 10.0.19044
    CPU: (4) x64 Intel(R) Core(TM) i7-6600U CPU @ 2.60GHz
  Binaries:
    Node: 16.13.0 - C:\Program Files\Node.js\node.EXE
    npm: 8.1.4 - C:\Program Files\Node.js\npm.CMD
  Browsers:
    Chrome: 96.0.4664.110
    Edge: Spartan (44.19041.1266.0), Chromium (97.0.1072.55)
  npmPackages:
    @storybook/addon-actions: 6.4.9 => 6.4.9
    @storybook/addon-controls: 6.4.9 => 6.4.9
    @storybook/addon-docs: 6.4.9 => 6.4.9
    @storybook/addon-knobs: 6.4.0 => 6.4.0
    @storybook/addons: 6.4.9 => 6.4.9
    @storybook/api: 6.4.9 => 6.4.9
    @storybook/components: 6.4.9 => 6.4.9
    @storybook/core: 6.4.9 => 6.4.9
    @storybook/core-events: 6.4.9 => 6.4.9
    @storybook/react: 6.4.9 => 6.4.9
    @storybook/theming: 6.4.9 => 6.4.9

Additional context

[kaiyoma]

Here's another repro:

1. Open a story in the UI
2. Rename the story in the source file

At this point, an error like this will appear:

[shilman]

@tmeasday looks like these are store-related errors. can you repro?

[tmeasday]

Hi @kaiyoma are you styling your SB? This is what I see:

[tmeasday]

@shilman these styles have not changed AFAIK.

[kaiyoma]

@tmeasday No, I'm not adding any custom styling.

[kaiyoma]

Oh, I see the issue. In my app, we have a background color defined for all pre elements, and this style seems to be leaking into this particular error page. Shouldn't Storybook's styles override all app styles for pages like this?

[tmeasday]

I guess it should. Do you have an idea of the best way to do that?

If you are interested, we'd love a PR to fix it. The styles are defined here: https://github.com/storybookjs/storybook/blob/0c79c53610546c3c7b3b06fc320b448bbb146f6e/lib/core-common/src/templates/base-preview-head.html