Upgrading to v1 has broken fonts in Storybook
See original GitHub issueAfter upgrading to v1.0.0
it appears that my storybook has stopped working. I have updated my preview.js file with the updated ChakraProvider:
addDecorator((storyFn) => (
<ChakraProvider resetCSS theme={theme}>
{storyFn()}
</ChakraProvider>
));
The issue is that the theme variables are being output directly on the component:
<Heading variant="caps6" as="h1">
Heading Caps6
</Heading>
Here is the same code working within the react app:
What I find that is interesting is that the font-family
is not demi
it is just cap
Just confirmation that all the fonts and styles have loaded, but are just not being applied:
Issue Analytics
- State:
- Created 3 years ago
- Reactions:1
- Comments:32 (10 by maintainers)
Top Results From Across the Web
Images, fonts, and assets - Storybook - JS.ORG
Components often rely on images, videos, fonts, and other assets to render as the user expects. There are many ways to use these...
Read more >OS/2 - Wikipedia
OS/2 (Operating System/2) is a series of computer operating systems, initially created by Microsoft and IBM under the leadership of IBM software designer...
Read more >Card4Call on the Mac App Store
Easily create your own business cards (size 8.5 x 5.5 cm). Features: - choose from over 2800 icons and 400 textures;.
Read more >Highly Anticipated Firmware for Surface Book and Surface Pro ...
Surface DTX driver update (v1.3.202.0) improves detection of the Surface keyboard to the clipboard. In addition to the updates list above, the ...
Read more >Grounded 1.0 Release - Go Big and Go Home!
We're excited to announce that the story is now available to play in ... Adjustments have been made to the weapon and armor...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
Top Related Hashnode Post
No results found
Top GitHub Comments
Sure @hutber.
package.json
.storybook/main.js
The
preview.js
file it is the same wrapping theChakraProvider
in the decorator.I was able to work around this in my project by:
webpackFinal
config that Chakra uses in my own Storybookmain.js
(see: https://github.com/chakra-ui/chakra-ui/blob/develop/.storybook/main.js#L11)node_modules
andyarn.lock
and reinstallMaking the above three changes got my Storybook styles working again. I’m not sure if the Storybook rc version actually makes a difference; I didn’t test downgrading to 6.0.x.