Storybook styles given higher precedence than project styles

[DaveLo]

If you are reporting a bug or requesting support, start here:

Bug or support request summary

I'm importing my base style reset in preview.js, it does normal reset things and also sets our app fonts. However when I load storybook I end up with

section {
    font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 24px;
    padding: 48px 20px;
    margin: 0 auto;
    max-width: 600px;
    color: #333;
}

overriding my set default line-height, font-family, etc. This causes an obvious issue for component development.

I'm sure there is some setting I need to change or something I'm missing but I'm basically using storybook 6 out of the box in a CRA typescript project. I've installed the preset scss since we use Sass

//main.js
module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/preset-scss",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
    "@storybook/addon-actions",
  ],
};

//preview.js
import "../src/index.scss";

If there is a class set on an element it wins out in specificity, but all of the app defaults seem to lose.

This is coming from an experiment in using MDX in case that is relevant?

import { Meta, Story } from "@storybook/addon-docs/blocks";
import PassFail from "./pass-fail";

import { options } from "../select.stories.mdx";

<Meta
  title="Components/Forms/PassFail"
  component={PassFail}
  argTypes={{
    onPassClick: { action: "successClick" },
    onFail: { action: "failClick" },
    reasonList: { type: "data", defaultValue: options },
    label: { type: "string", defaultValue: "This is a test" },
  }}
/>

# Pass/Fail Element

Adds pass fail combo button with dropdown for fail reasons

export const Template = (args) => <PassFail {...args} />;

<Story name="Default">{Template.bind({})}</Story>

[shilman]

Perhaps you can put your stories in iframes to stop the style conficts?

https://storybook.js.org/docs/react/writing-docs/doc-blocks#inline-rendering

[DaveLo]

Perhaps you can put your stories in iframes to stop the style conficts?

https://storybook.js.org/docs/react/writing-docs/doc-blocks#inline-rendering

That is absolutely what I was missing, so to turn it off by default I would want to add:

// preview.js
import "../src/index.scss";

export const parameters = {
  docs: {
    inlineStories: false,
  },
};

That seems like an odd thing to have on by default since it definitely messes with style resets, but thank you so much for pointing me towards a solution!

[shilman]

@DaveLo rendering multiple iframes on the page has performance issues

[ArmanNisch]

I have a similar issue occurring now, but it only seems to affect the <section> HTML Element. I do have a css class assigned to my <section> element, but it seem like the storybook styles are assigned directly to the <section> element (therefore the higher specificity takes precedence).

Setting inlineStories: false as indicated above by @DaveLo does not seem to resolve the issue?

I am currently on storybook Storybook 6.3.8, I recently upgrade form 6.2.9 (this issue was also present in that version).

The following styles are set by storybook:

section { font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 24px; padding: 48px 20px; margin: 0 auto; max-width: 600px; color: #333; }

The only real 'solution' I found to this problem is to basically manually overwrite each of these settings in my global styles sheet. Not ideal...

I am also a bit concerned as I don't know what else might be inadvertently affected by storybook styles.

[ybelenko]

Same issue here, version "@storybook/react": "^6.3.8". Checked in Chrome and Safari browsers and cannot even find where this style line comes from. As temp workaround I replaced all <section> tags to <div>s.

[mtford90]

Also just encountered this - any component using section has it's styles overridden

[dbashford]

Also having the issue with section, specifically with max-width causing everything to max out at 600px.

Temp hack in the story:

export const StoryComponent = Template.bind({});
StoryComponent.play = () => {
  document.querySelector('section').style.maxWidth = 'inherit';
};

No idea what kind of side effects that will have, but it is at least confined to storybook and not a tweak to component styles.

[mokone91]

Seems issue not resolved yet

inlineStories: false do not change anything..

[ArmanNisch]

@shilman can one reopen this issue? Its not resolved and does have some direct side-effects that affect how our applications behave.

[matthewhampton]

For anyone else who runs in to this - it is not actually coming from Storybook itself - it is from the samples that are generated when you bootstrap... If you delete / modify those you'll be fine:

[ArmanNisch]

@matthewhampton haha, ok, this is so obvious in hindsight. Thank you for picking up on this.

@shilman an overengineered idea might be to add a painfully obvious disclaimer on the bootstrapped Storybook CSS files stating CSS is global and not deleting the boilerplate CSS can have consequences for other components imported into Storybook. Is it overkill to do something like that? Maybe, but clearly, a few people have had issues with these unintended side effects ;-)

[shilman]

@ArmanNisch I think it's being addressed here https://github.com/storybookjs/storybook/pull/19433

[shilman]

Boo-yah!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.14 containing PR #22162 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb@next upgrade --tag future

[shilman]

Jeepers creepers!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.10 containing PR #22162 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb@latest upgrade