Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Storybook styles given higher precedence than project styles

See original GitHub issue

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>