[REACT] storybook reset.css 적용

storybook에서 보면 기본적으로 reset.css가 적용되어 있지 않아 화면에서 볼때 깨지는 문제가 발생했었다.

 

 

reset.css혹은 다른 css 파일을 넣는 방법은 굉장히 쉽다.

 

https://velog.io/@kimhyo_0218/Storybook-emotion%EC%9C%BC%EB%A1%9C-storybook-%EA%B8%80%EB%A1%9C%EB%B2%8C-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-reset-css

[Storybook] emotion으로 storybook 글로벌 스타일 설정하기 (reset css)

 

 

 

요런 블로그들을 보면 Global스타일을 만드는 방법 등이 나오는데 단순하게 reset.css만 넣고싶다면

 

 

 

.storybook - preview.ts파일에 들어가서

 

import type { Preview } from "@storybook/react";
import "../src/styles/css/reset.css"; // reset.css 가져오기

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

export default preview;

 

위처럼

 

import 문으로 css파일을 가져오면 끝난다!!!