Open chrisolsen opened 2 years ago
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>
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..
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
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;
}```
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;
No one that workarounds work for me, I use nuxt3 and PrimeVue
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 injectedcss-xxx
class.** I do have the font that I want set in the theme, but that doesn't seem to have any effect.
There is also the issue of the sbdoc and sbdocs-* classes that are injected to all my components.