Chakra Styles not being applied in Storybook

[ntwrkjasen]

Hello, I've been banging my head against the wall for a few days. I'm using the official chakra ui storybook add on and can't get the chakra styles to be applied to my storybook components. Any help would be MUCH appreciated.

main.js

module.exports = {
  stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@chakra-ui/storybook-addon',
  ],
  framework: '@storybook/react',
  core: {
    builder: 'webpack5',
  },
  features: {
    emotionAlias: false,
  },
};

previews.js

import { extendTheme } from '@chakra-ui/react';
const theme = require('../src/lib/styles/theme');

const config = {
  useSystemColorMode: false,
};

const customTheme = extendTheme({ config, ...theme });

export const parameters = {
  chakra: { customTheme },
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

theme.tsx

const breakpoints = createBreakpoints({
  lg: '1024px',
  md: '768px',
  sm: '425px',
  xl: '1440px',
});

export default extendTheme({
  borders: {
    brand: {
      1: '1px solid #000000',
      2: '1px solid #333333',
      3: '1px solid #666666',
      4: '1px solid #999999',
      5: '1px solid #CCCCCC',
      6: '1px solid #E6E6E6',
      7: '1px solid #F9F9F9',
      8: '1px solid #FFFFFF',
    },
    error: {
      1: '1px solid #e53e3e',
      2: '2px solid #e53e3e',
      3: '3px solid #e53e3e',
    },
  },
  breakpoints,
  colors: {
    admin: '#41E051',
    brand1: '#000000',
    brand2: '#333333',
    brand3: '#666666',
    brand4: '#999999',
    brand5: '#CCCCCC',
    brand6: '#E6E6E6',
    brand7: '#F9F9F9',
    brand8: '#FFFFFF',
    brand9: '#2136F6',
    error: '#e53e3e',
    ntwrkBlack: {
      // custom black that can be used in color scheme props
      50: '#666666',
      100: '#666666',
      200: '#666666',
      300: '#666666',
      400: '#666666',
      500: '#000000',
      600: '#000000',
      700: '#000000',
      800: '#000000',
      900: '#000000',
    },
    success: '#76D22E',
  },
  components: {
    CircularImage,
    Popover: {
      variants: {
        gridUserNames: {
          popper: {
            marginTop: '0 !important',
            maxWidth: 'none',
            width: 'auto',
          },
        },
      },
    },
    Table: {
      baseStyle: {
        th: {
          textTransform: 'none',
        },
      },
      parts: ['th'],
      variants: {
        simple: {
          td: {
            fontSize: '.75rem',
          },
          th: {
            borderBottom: 'none',
            color: 'brand2',
            fontSize: '0.813rem',
            fontWeight: '600',
          },
        },
      },
    },
  },
  fontSizes: {
    '2xl': 18 / 16 + 'rem',
    '3xl': 20 / 16 + 'rem',
    '4xl': 24 / 16 + 'rem',
    '5xl': 28 / 16 + 'rem',
    '6xl': 40 / 16 + 'rem',
    lg: 13 / 16 + 'rem',
    md: 12 / 16 + 'rem',
    sm: 11 / 16 + 'rem',
    xl: 16 / 16 + 'rem',
    xs: 10 / 16 + 'rem',
  },
  fontWeights: {
    medium: 500,
    normal: 400,
  },
  fonts: {
    body: 'Graphik',
    heading: 'Graphik',
  },
  letterSpacings: {
    wide: '0.2px',
    wider: '0.3px',
  },
  lineHeights: {
    base: '20px',
    normal: '22px',
    short: '17px',
    shorter: '16px',
    shortest: '15px',
    tall: '24px',
    taller: '28px',
    tallest: '32px',
  },
  shadows: {
    box: '0 0 10px rgba(0,0,0,0.25)',
  },
  sizes: {
    '13': '3.25rem',
    '15': '3.75rem',
    '50': '12.5rem',
    '65': '16.25rem',
    '75': '18.75rem',
  },
});

[ntwrkjasen]

This can be closed. I'm dumb 🤦🏾‍♂️

[oscarsala]

what was your solution?

[fredrik-sogaard]

Yes, curious as well! Could you post your solution?

[jovangacic]

maybe it was this the fact that he was passing customTheme and needed to pass theme

[gabrielfgularte]

I'm facing the same problem, but in my case, I think that I'm placing the custom theme in a right way.

main.js

const path = require('path')

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/preset-create-react-app',
    '@chakra-ui/storybook-addon',
  ],
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-webpack5',
  },
  features: {
    emotionAlias: false,
  },
    return config
  },
}

preview.js

const theme = require('../src/theme')

export const parameters = {
  chakra: { theme },
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

All the components appear, but they don't get my custom theme. =/ @ntwrkjasen can you explain how have you managed to solve that? It can help me out on this one. Thanks.

[gabrielfgularte]

And I've tried both with require and import. It doesn't work either way.

[60pfennig]

yes I think this is not intendet to work or its a bug in the ChakraUI storybook addon. If you create the an own story for each component it will work.

[pawangujral]

Chakra Storybook won't change as it is a vendor storybook, wrapped for you just as an example. You have to create your custom component if you want to see your changes.

[pawangujral]

Not recommend it, But if you really want to do that, you need to import your theme in Chakra package within node_module. and keep patch sync so you don't lose your custom changes. bit hard but doable, if you dig deep :) .. I never tried it but I'm hopeful it will work.

[ivorynoise]

@gabrielfgularte did you manage to override the default theme for components under Chakra UI section in storybook ? I have exact requirements and cannot figure out a way except patching node_modules.

[pawangujral]

for rest of fellow searcher who are still banging their head for solution, this is how I solved it understanding from this thread.

Add this in preview.js

const theme = extendTheme({
  colors: {
    brand: 'green', // Whatever your custom changes are
  },
});

export const parameters = {
  chakra: { theme }, // THIS <===
  .......
}

In Component

<Button bg="brand"> Click me </Button>

Hope it helps :)

[pawangujral]

@60pfennig Share your repo, will check.

[gabrielfgularte]

@gabrielfgularte cloned your repo and fixed it (In whatever way I understood your problem). If you can allow my account to push code to your repos, I can push new branch for your to check.

@pawangujral Sure. Done! Thank you!

[pawangujral]

Created draft MR by that example, you can customise each one. Let me know if I misunderstood your requirement and doesn't work.

[60pfennig]

Hi @pawangujral, for me the solution below from @dyelax worked.
I changed const theme = require("/styles/theme"); to import theme from "../styles/theme";
Note: don't use curly braces: import {theme} from "../styles/theme";

[pawangujral]

Awesome. 👍🏼

[dyelax]

I ran into a similar problem and it was because my theme wasn't importing correctly into .storybook/preview.js. Following the setup instructions, I had const theme = require("/styles/theme");, but I had to change it to import theme from "../styles/theme";

Note the 2 changes:

• Change from require => import
• Change from absolute path to relative path

[gabrielfgularte]

It doesn't work for me. Even if I put the theme on storybook/preview.js without import it, like this:

# storybook/preview.js

import { extendTheme } from '@chakra-ui/react'
const theme = extendTheme({
  components: {
    Button: {
      baseStyle: {
        bg: 'blue',
        backgroundColor: 'blue',
        color: 'white',
      }
    }
  }
})

export const parameters = {
  chakra: { theme },
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

Please refer to this comment - I've created a repo to expose the issue.

[gabrielfgularte]

None of the suggestions above have worked, so I created a repo to debug the problem: https://github.com/gabrielfgularte/chakra-storybook. Please, refer to this comment to see what I did.

Although you can see the custom themed button working on localhost:3000, the storybook panel doesn't render the themed button. It keeps the basic chakra style from default theme.

[gabrielfgularte]

@ntwrkjasen if you have managed to solve this issue, please, can you illustrate what you did? Thank you!

[wazcov]

For me the problem was to change this:

const preview: Preview = { parameters: { chakra: { CustomTheme, }, actions: { argTypesRegex: "^on[A-Z].*" }, controls: { matchers: { color: /(background|color)$/i, date: /Date$/i, }, }, }, };

to this

const preview: Preview = { parameters: { chakra: { theme: CustomTheme, }, actions: { argTypesRegex: "^on[A-Z].*" }, controls: { matchers: { color: /(background|color)$/i, date: /Date$/i, }, }, }, };

Note how under chakra, you have to specify a theme: <importOfYourTheme>

[ilhamkukuh]

am I also experiencing the same issue? All the answers above did not work. Any updates for this?

I use storybook ^7.5.3

[Rawallon]

Hey, I found the cause and a workaround:

The problem is that configs on Preview.ts are not getting loaded, I don't know why, I'll leave that for someone else to figure it out, once I noticed that figuring out a workaround was pretty quick.

I'm using Decorators to wrap the component on ChakraProvider, here's an example story (also, don't forget to rename the extension from .ts to .tsx)

import type { StoryObj } from '@storybook/react';
import { Button, ChakraProvider } from '@chakra-ui/react';
import { extendedTheme } from 'ui';

const meta = {
  title: 'Example/Button',
  component: Button,
  parameters: {
    layout: 'centered',
  },
  decorators: [
    (Story: any) => (
      <ChakraProvider theme={extendedTheme}>
        <Story />
      </ChakraProvider>
    ),
  ],
};


export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    bg: 'blue',
    children: 'Keep on keeping on',
  },
};