How to remove default styles in storybook

Admin 1
Viewed 359

Similar question but the same: How to remove default Storybook Canvas styles?

The default font fam used in Storybook is:

font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

But this is overriding a lot of my apps fonts as the dont is applied to a class at the element level. See the pic:

enter image description here

How can this be turned off?

(this is vue with buefy component lib)

storybook
2 Answers

You can add custom styling to every different element that storybook renders, in .storybook/preview.ts. You can apply an empty style like below (or your own defined style with your own font) and it will not load the custom generated styling.

import { styled } from '@storybook/theming';

const divEmpty = styled.div(({ theme }) => ({
}));
const pEmpty = styled.p(({ theme }) => ({
//example of custom font
fontFamily: "Arial"
}));
const spanEmpty = styled.span(({ theme }) => ({
}));
const inputEmpty = styled.input(({ theme }) => ({
}));

export const parameters = {
    ...
    docs: {
        components: {
            p: pEmpty,
            div: divEmpty,
            span: spanEmpty,
            input: inputEmpty
        },
    },
}
user_23626250

First off, you can't remove ALL of the styles of Storybook. Otherwise you'll have to design the sidebar and all the buttons yourself. Those styles in your screenshot are only applying to the docs generated by Storybook, not your own components. They're attached to class sbdocs. For example:

sbdocs-p instead of p,

sbdocs-h1 instead of h1

etc. If you want to override them, why not simply override them like this?

p, .sbdocs-p{
    font-family:inherit;
}
h1, .sbdocs-h1{
    font-family:inherit;
}

etc.

user_52433090
Related