storybook

tag

test


import MainHeader from '@/components/Test/MainHeader';
import { Meta, StoryObj } from '@storybook/react';

const meta: Meta<typeof MainHeader> = {
  component: MainHeader,
  argTypes: {
    width: {
      control: 'number',
    },
    height: {
      control: 'number',
    },
  },
};

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

export const Deafult: Story = {
  args: {
    width: 200,
    height: 80,
  },
};

storybook컴포넌트에서 chakra-ui사용시 제대로 스타일이 적용되지 않습니다

npm i -D @chakra-ui/storybook-addon 설치후

.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,
	},
}

추가해주시면 정상적으로 작동합니다