Chakra UI is not loading when used with Storybook

Question

I'm still learning storybook. I've set up Storybook and Chakra-UI using create-react-app following the decorator's documentation as mentioned here. Here's the link for the repository.

For some reason, Storybook is not loading the styles from Chakra-UI. Here's the button on react app:

Here's the button on Storybook:

The variants from the custom theme are working but not colours:

I'm not sure how to correct this problem. Please help me out.

Answer 1

This can be resolved in 1 of 2 ways. For my the old unofficial addon works out of the box.

Option 1: unofficial addon but simpler

Install https://storybook.js.org/addons/@snek-at/storybook-addon-chakra-ui

.storybook/main.js

module.exports = {
  addons: ['@snek-at/storybook-addon-chakra-ui']
}

And since you need custom theme:

import myTheme from '../theme'
export const parameters = {chakra: {theme: myTheme}}

Option 2: - Official addon

Is to use the very new official chakra-ui addon.

@chakra-ui/storybook-addon

npm i -D @chakra-ui/storybook-addon
npm i @chakra-ui/icons

Then add the addon in .storybook/main.js

module.exports = {
  addons: ['@chakra-ui/storybook-addon'],
}

.storybook/preview.js

const theme = require('../path/to/your/theme')

export const parameters = {
  chakra: {
    theme,
  },
}

However, this did NOT work out of the box for me. I would wind up with webpack errors on build. To fix this I am using the experimental webpack 5 for storybook. For step by step instructions on how to install: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack-5

But for me this was enough

npm install @storybook/builder-webpack5 @storybook/manager-webpack5 --save-dev

and .storybook/main.js

module.exports = {
  core: {
    builder: 'webpack5',
  },
};