Storybook's styling overrides all

[chrisolsen]

Describe the bug

Storybook's css seems to take priority over everything, which doesn't make much sense for a default.

The image below shows that the font-size/family for the p is being overridden by an injected css-xxx class.

** I do have the font that I want set in the theme, but that doesn't seem to have any effect.

// abTheme.js
import { create } from '@storybook/theming/create';
import logo from '../libs/shared/storybook-common/assets/logo-ds.svg';

export default create({
  base: 'dark',
  colorPrimary: '#005daa',
  colorSecondary: '#005daa',

  // Typography
  fontBase: 'acumin-pro-semi-condensed, sans-serif',
  fontCode: 'monospace',

  brandTitle: 'Design System',
  brandUrl: 'https://brand.ca',
  brandImage: logo
});

// manager.js
import { addons } from '@storybook/addons';
import abTheme from './abTheme';

addons.setConfig({
  theme: abTheme
});

There is also the issue of the sbdoc and sbdocs-* classes that are injected to all my components.

[Pegase745]

I know this issue is more than a year old, but I just had the problem and I solved it for the moment by setting sb-unstyled to the main container of the page.

<div className="sb-unstyled">
   ....
</div>

EDIT: even better, TIL the existence of @storybook/blocks

import { Unstyled } from '@storybook/blocks';

<Unstyled>
   ...
</Unstyled>

[btmnk]

I don't know how this is still an issue. I've read the same problem with the same workaround like 5 times today.
It's not just p tags, it's everything. You can't customize anything without !import or copy-pasting the hash-classname.
Adding <Unstyled> to every Story also seems highly cumbersome..

IMHO storybook should use a css layer for the default styles so any non-layered styles automatically get a higher cascading priority. Or the theming approach should be extended a lot so it actually provides a complete way to customize storybooks ui..

[miclgael]

Yeah, this is really weird. This is tagged has workaround but these workarounds don't work for me.

I had to get weird with it. https://gist.github.com/miclgael/73ce0297321338d4092258d99240710f

[simcha90]

As workaround for my case just override these classes as can to do in preview-head:

p {
   display: inherit;
   margin-block-start: inherit;
   margin-block-end: inherit;
   margin-inline-start: inherit;
   margin-inline-end: inherit;
   font-family: inherit;
   font-size: inherit;
   margin: inherit;
   line-height: inherit;
   color: inherit;
}```

[KelvinOm]

Workaround that works for me. I added to preview.tsx the following:

import { theming } from "./decorators/theming";
import { DocsContainer } from "@storybook/addon-docs";
import { Unstyled } from "@storybook/blocks";

const preview = {
  parameters: {
    docs: {
      container: ({ children, context }) => (
        <DocsContainer context={context}>
          <Unstyled>
              {children}
          </Unstyled>
        </DocsContainer>
      ),
    },
  },
};

export default preview;

[andreLuis1506]

No one that workarounds work for me, I use nuxt3 and PrimeVue